Synthetic Shadow — Styling & Cascading Order

同学们，咱们接着来看合成阴影是怎么处理样式的。这和原生阴影走的是完全不同的路子。 原生阴影会把样式封在组件自己的影子树里面，但合成阴影不一样。它把带有作用范围的样式，直接注入到整个文档的 `` 标签里。而且它不是用普通选择器，而是利用属性选择器，只精准地命中这个组件自己的元素。这样一来，我们就可以在文档级别去写一套共享样式，来统一设置所有组件的样式了。SLDS 在 Lightning Experience 里正是这么工作的，组件不用各自再加载一遍样式表，既统一又省事。 那如果组件自己带了样式，优先级是怎么排的呢？你记住这个顺序就好：优先级最高的，是组件自己写的 CSS，它带有作用范围，是最具体的；接着，是通过 `@import` 引入的 CSS，它同样也带有作用范围；最后，才是通过 `loadStyle` 这种全局方式加载的样式，它会影响所有组件，所以优先级最低。 还有个要留意的变化。从 API v59.0 版本开始，CSS 作用域的令牌格式改了。以前会带上组件名字，一眼就能看出来是哪个组件的样式，现在换成了基于哈希值的模糊令牌，更难从名字上直接辨识了，但封装效果其实是一样的。 最后咱们说说性能。你可能会担心，如果好几个组件都拷贝了相同的样式表，会不会重复加载拖慢性能？完全不用担心，LWC 会自动帮你把重复的样式去掉，所以就算你多复制几份，也不会造成额外负担。 好了，关于合成阴影的样式处理，我们就先聊到这儿。