Angular子组件中如何检测<html>标签是否存在指定类

问题场景 #

点击按钮切换深色模式时，<html>标签会动态添加app-dark-theme类，需要在Angular子组件内判断该类是否存在，为组件中的.test-class元素设置样式。尝试使用:has()伪选择器但未生效，原代码如下：

html:has(.app-dark-theme) {
  .test-class {
    border: 1px solid var(--p-blue-200);
  }
}

纯CSS/SCSS解决方案 #

1. 修正选择器写法（核心问题）

原代码中:has(.app-dark-theme)的用法错误，:has()是用来匹配包含指定后代元素的父元素，但app-dark-theme是直接添加在<html>标签本身的类，不需要用:has()，直接使用类选择器叠加即可：

// 常规写法
html.app-dark-theme .test-class {
  border: 1px solid var(--p-blue-200);
}

// SCSS嵌套写法
html.app-dark-theme {
  .test-class {
    border: 1px solid var(--p-blue-200);
  }
}

2. 解决Angular组件样式隔离问题

由于Angular组件默认开启视图封装（ViewEncapsulation.Emulated），组件内的样式会被自动添加属性前缀，导致无法全局匹配<html>标签的类，可通过以下两种方式解决：

• 方式一：使用::ng-deep破除局部样式隔离

::ng-deep html.app-dark-theme .test-class {
  border: 1px solid var(--p-blue-200);
}

• 方式二：将样式移至全局样式文件
  把上述样式代码放到项目根目录的styles.scss（或styles.css）中，全局样式不受组件视图封装限制，可直接生效。

3. 若一定要使用:has()的场景（可选）

如果后续需要检测<html>标签下的后代元素是否存在某类，:has()可以这么用，但要注意浏览器兼容性（现代浏览器均支持），同时仍需解决Angular的样式隔离问题：

::ng-deep html:has(.some-child-element) .test-class {
  border: 1px solid var(--p-blue-200);
}

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