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

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]更具体。