常规组件样式和：host嵌套样式之间有什么区别？

Question

为具有默认视图封装值ViewEncapsulation.Emulated的组件考虑以下组件级样式：

:host h2 {
    color: red;
}

这将编译为以下CSS：

[_nghost-c0] h2[_ngcontent-c0] {
    color: red;
}

但是，如果在规则中省略了:host选择器，则生成的CSS将是这样：

h2[_ngcontent-c0] {
    color: red;
}

这两个CSS规则在行为上有区别吗？我了解使用:host 本身来设置顶级组件元素的样式，但是一旦嵌套到子元素，:host就是没有意义吗？

Answer 1

:host仅在样式化组件本身时才需要。为其中的内容创建选择器时，无需使用它。

如果将其添加到该规则（:host h2），则只需增加该规则的specificity（以防您需要这样做）。在计算CSS的应用顺序时，[_nghost-c0] h2[_ngcontent-c0]比h2[_ngcontent-c0]更具体。