Angular中如何使用::ng-deep且仅作用于单个组件？

要实现仅作用于当前组件的暗黑模式样式，无需滥用::ng-deep破坏全局封装，推荐使用Angular提供的:host-context()伪类，或者调整::ng-deep的选择器顺序：

方法1：使用:host-context()（推荐） #

:host-context()专门用于检测宿主组件的任意祖先元素（包括<body>）是否存在指定类，完美适配主题切换场景，且不会打破组件样式隔离：

:host-context(.dark-theme) .action-button:hover {
  color: #ffffff;
}

这个规则的含义是：当<body>（或其他祖先元素）带有.dark-theme类时，当前组件内的.action-button:hover元素应用该样式。

方法2：正确使用::ng-deep #

如果必须使用::ng-deep，需要调整选择器顺序，先定位全局的.dark-theme，再限制到当前组件的宿主元素：

::ng-deep body.dark-theme :host .action-button:hover {
  color: #ffffff;
}

为什么之前的写法无效？ #

• 第一种尝试的选择器::ng-deep .dark-theme { :host .action-button:hover }：选择器顺序逻辑模糊，::ng-deep的穿透范围容易导致意外匹配，且优先级不如:host-context()清晰。
• 第二种尝试的选择器:host ::ng-deep .dark-theme .action-button:hover：错误地在宿主组件内部寻找.dark-theme元素，但.dark-theme挂载在<body>上，并非宿主的子元素，因此无法匹配目标元素。

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