Light DOM — Scoped Region & :host Selector

我们现在来讲讲Lightning Web Components中样式作用域的一个关键概念。 首先，什么是“范围区域”呢？其实就是组件HTML模板里定义的所有元素的集合。换句话说，组件模板内的一切元素构成了一个作用范围。而作用域样式，就是专门针对这个范围里面的元素生效的。它是通过CSS类来实现作用域的，这一点和合成阴影那种基于属性的作用域不太一样，不过这只是外观上的差异，功能目的相同。 接下来要说的是`:host`伪选择器。它在有作用域和无作用域的样式上下文里，行为是有区别的。在无作用域样式中，`:host`指向的是最近的影子根宿主。但在有作用域样式中，编译器会把`:host`转换一下，让它指向轻量DOM组件的根元素。这样做的目的，就是让你能方便地对组件最外层的元素进行样式设置，就像给组件自身穿上外套一样。 不过，轻量DOM作用域样式相对合成阴影有三个局限性，你们需要知道。第一，它使用类而不是属性来做作用域标记，这属于刚才提到的表面差异。第二，它不支持作用域样式表里的`@import`规则。第三，它不能应用于通过`lwc:dom="manual"`手动注入的内容，比如用`appendChild`或`innerHTML`加进来的元素，这些内容的样式不会自动带上作用域。 最后要留意，无论是哪种模式，都不支持`:host-context()`选择器。 好了，这一部分就讲到这里，大家对作用域样式应该有个清晰的轮廓了。有什么问题随时打断我。