Angular中:host-context(.class)选择器作用范围相关疑问

很多开发者对Angular官方文档中:host-context()的描述存在理解偏差，它的实际匹配规则并没有限制只能查找组件视图外的节点：

• :host-context() 的查找起点就是当前组件的宿主元素本身，之后会沿着DOM树向上遍历所有祖先节点
• 只要宿主自身或者任意一个祖先节点符合传入的选择器条件，样式就会生效

官方文档提到的「在组件视图作用域之外寻找匹配」，是指它可以突破组件样式隔离的限制，向上查询父级、祖先级节点的类、属性等特征，而非排除宿主元素本身的匹配。

你测试中观察到的「将对应class应用在当前组件内部也能匹配」属于正常表现，不是操作错误。出现这种情况的核心原因是你添加class的节点属于宿主元素本身，或者处于宿主节点的上级DOM层级，刚好落在了:host-context()的匹配范围内。

举个常见的使用场景示例：

// 只要宿主自身或者任意祖先有dark类，组件内的p标签文字就变为白色
:host-context(.dark) p {
  color: #fff;
}

如果在调用组件时直接给宿主加dark类，比如<app-my-component class="dark"></app-my-component>，上面的样式会直接生效，完全符合设计逻辑。

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