我有一个动态类，当用户按下按钮将视图切换到深色模式时，该类应用于 html 标签：
<html lang="en" class="app-dark-theme">现在在子 Angular 组件中，我需要检查 html 标签上是否存在此类，以设置该子组件中某个特定类的样式。
我怎样才能实现这个目标？我尝试过 :has() 伪选择器，但它对我不起作用。
html:has(.app-dark-theme) {
.test-class {
border: 1px solid var(--p-blue-200);
}
}
如果可能的话，最好的解决方案是纯 CSS/SCSS。
谢谢。
该问题很可能是由 Angular Style 范围引起的。
默认情况下，Angular 使用模拟封装，以便组件的样式仅适用于该组件模板中定义的元素。在此模式下，框架为每个组件实例生成唯一的 HTML 属性，将该属性添加到组件模板中的元素，并将该属性插入到组件样式中定义的 CSS 选择器中。 在 Angular 文档中查看更多内容
于是就有了下面的组件样式
html.app-dark-theme {
.test-class {
border: 1px solid var(--p-blue-200);
}
}
结果类似于
// _ngcontent-ng-c2903067727 is the unique HTML attribute added by Angular
// It is not specified on the html element so the CSS rule doesn't match anything
html.app-dark-theme[_ngcontent-ng-c2903067727] .test-class[_ngcontent-ng-c2903067727] {
border: 1px solid var(--p-blue-200);
}
为了解决这个问题，Angular 文档建议使用
:host-context():host-context(html.app-dark-theme) {
.test-class {
border: 1px solid var(--p-blue-200);
}
}