Synthetic Shadow — Overview

同学们，今天我们聊一个稍微轻松一点的话题，就是“合成阴影”这玩意儿。你可能会觉得这个名字听起来有点玄，别急，我慢慢跟你说。 想象一下，几年前，Salesforce刚开始推Lightning Web Components的时候，浏览器对Web组件的支持还不够完美，特别是阴影DOM——也就是Shadow DOM，它能把组件的样式和结构隔离开，不让外面的东西乱影响。但有些旧浏览器根本不认识这个技术。那怎么办？Salesforce就写了一段补丁代码，叫Polyfill，它模拟出类似原生Shadow DOM的效果，这，就是合成阴影。 在Lightning Experience和Experience Builder里，合成阴影一直是默认启用的。它就像一个临时过渡方案，帮我们在那些不支持原生阴影的浏览器上也能正常运行组件。但是，这些年情况变了，所有现代浏览器都已经完美支持原生Shadow DOM了。我们现在再写新组件，完全不需要那个补丁了。Salesforce也意识到了，现在正积极地通过一种“混合阴影模式”，一步一步把系统迁移到原生阴影，将来合成阴影会被淘汰。这个过程你不需要做什么，底层会自己进化。 那么，合成阴影具体怎么工作的呢？它其实就是在每个组件元素上偷偷加上一堆奇怪的属性，比如 `lwc-66 unc 5l 95 ad-Host` 这种。这些属性就像独特的标记，CSS可以用它们来做样式的限定，模拟作用域。比如你的组件样式会自动被编上这些标记，就不会影响到外面了。 但是你要注意，这些奇怪的属性是Salesforce的内部实现细节。你可千万别依赖它们的格式去写代码或者写测试。因为开发团队随时都可能改，而且不会特意通知你。事实上，从API版本59.0开始，这些标记的格式就已经变了，以前可能是用组件名字生成的，现在换成了基于哈希的模糊字符串，更随机了。你要是写代码去检查 `lwc-` 开头的属性，那将来版本一升级，你的代码可能就莫名其妙坏掉了。 所以，记住两件事：第一，合成阴影正在被原生阴影取代，新组件放心用原生能力就行；第二，绝对不要碰那些奇怪的属性标记，它们是内部的，像幽灵一样，今天长这样，明天可能换了张脸。 好，这一小节课就到这里，你们明白了吗？有什么问题直接问。