Light DOM — Scoped Styles (*.scoped.css)

同学们，今天我们来聊聊Lightning Web Components里一个很实用的功能，叫Scoped样式表，文件名后缀是.scoped.css。这个功能给轻型多姆组件带来了类似Shadow DOM那种样式封闭的效果。 简单说，就是LWC编译器会帮你自动处理CSS选择器，给它们加上一个组件专属的作用域class。这样一来，你写的样式就只会对当前组件里的元素生效，不会到处乱跑污染其他组件。 那在浏览器最终渲染出来的页面里，你会看到，组件注入了带有转换后选择器的样式标签。比如你写的按钮样式，它会自动变成带特定class的选择器，只匹配组件内部的按钮。 还有一点要注意，如果一个组件里同时有普通的.css文件和作用域的.scoped.css文件，加载顺序是无作用域的先注入，作用域的后注入。什么叫后注入？就是作用域样式会覆盖前面冲突的规则。所以作用域样式拥有更高的优先级。不过呢，无作用域样式仍然有可能泄露到页面其他元素上，而作用域样式会被牢牢限制在组件内部。 另外，如果你的轻型多姆组件是放在基于Aura的容器里用的，那么它只支持作用域样式表，这一点要记住。 最后一点，强烈不建议在作用域样式里用!important这种粗暴规则，因为作用域样式通过转换后的选择器，本身就已经能自然获得比较高的特异性了，足够覆盖大多数情况了。 好，这一页我们就讲到这里。有什么问题随时问。