Angular SASS中:host(.column)选择器含义及参数解读问询

先看你给出的SASS代码：

:host {
  display: flex;
  flex-wrap: wrap;
}

:host(.column) {
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

直接给出结论：

• :host(.column)选取的就是附加了column类的组件宿主元素
• 完全可以按「括号内是宿主元素需要满足的选择器条件」这个逻辑来解读。

具体说明：
在Angular组件的样式体系里，:host是专门用来选中组件自身宿主元素的伪类。当:host后面跟括号包裹的选择器（比如这里的.column类选择器）时，就表示只有当宿主元素身上存在column这个类名时，才会应用这组样式。

举个实际场景：如果你的组件在父模板里是这么使用的：

<app-custom-container class="column"></app-custom-container>

那:host(.column)里的样式就会生效在这个<app-custom-container>元素上；如果组件没有添加column类，这组样式就不会触发。

而不带括号的:host选择器，是无条件作用在宿主元素上的，不受宿主额外类名的影响。

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