常规组件样式和 :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)，您只需增加该规则的特殊性（如果您需要这样做）。比计算应用 CSS 的顺序时[_nghost-c0] h2[_ngcontent-c0]更具体。h2[_ngcontent-c0]