Angular组件样式中使用:host和不使用的区别是什么？

问题1解答 #

你的第一个认知是正确的。
Angular默认使用模拟视图封装（ViewEncapsulation.Emulated）模式，组件CSS文件中编写的普通选择器默认只会作用于当前组件模板内的元素，不会影响父组件、子组件的元素，也不会泄露到全局。所以你写的h1样式仅会匹配<app-a-component>内部的h1标签，不会影响组件外的内容。

问题2解答 #

你的第二个认知也是正确的。
:host伪类选择器的作用是选中当前组件的宿主元素本身（也就是<app-a-component>这个自定义标签），:host h1的语义是「宿主元素内部所有的h1元素」，在默认视图封装模式下，和直接写h1的作用范围、渲染效果完全一致。

为什么需要:host语法 #

两个场景下的效果完全一致只是非常窄的特殊情况，:host的核心作用是处理普通选择器覆盖不到的场景，常见用途如下：

• 给宿主元素本身设置样式：普通选择器无法选中组件的宿主元素，如果你需要给<app-a-component>标签本身添加边距、边框、宽高、显示模式等样式，必须通过:host实现，示例如下：

/* 给组件本身加边框、设置为块级元素 */
:host {
  display: block;
  border: 1px solid #eee;
  padding: 16px;
  margin-bottom: 8px;
}

• 基于宿主自身的状态控制内部样式：你可以通过:host结合属性、类选择器，实现只有宿主满足指定条件时，内部样式才生效的效果，比如：

/* 只有宿主元素自身带有active类时，内部的h1才会变成红色 */
:host(.active) h1 {
  color: red;
}

• 关闭视图封装时限制样式作用范围：如果你的组件关闭了视图封装（ViewEncapsulation.None），普通选择器的样式会泄露到全局，此时添加:host前缀可以保证样式仅作用于当前组件内部，避免污染全局样式。

内容的提问来源于stack exchange，提问作者Snookums