How to detect if ＜html＞ tag has a class in child Angular component

营赢盈英2025-11-01 11:27

题意：

如何检测 <html> 标签在子 Angular 组件中是否有类？

问题背景：

I have a dynamic class which is applied on html tag when user presses the button to switch view to dark mode:

我有一个动态类，当用户按下按钮切换到暗黑模式时，应用于 <html> 标签。

html 复制代码

<html lang="en" class="app-dark-theme">

Now in child Angular component I need to check if this class exists on html tag to style one particular class in this child component.

现在，在子 Angular 组件中，我需要检查 <html> 标签上是否存在这个类，以便为该子组件中的某个特定类应用样式。

How can I achieve this? I tried :has() pseudo-selector but it didn't work for me.

我怎么才能实现这个呢？我试过 :has() 伪选择器，但它对我不起作用。

css 复制代码

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

Preferable solution is pure CSS/SCSS if possible.

如果可能的话，优先使用纯 CSS/SCSS 解决方案。

Thanks.

问题解决：

The issue is most likely caused by 问题很可能是由以下原因引起的： Angular Style scoping.

By default, Angular uses emulated encapsulation so that a component's styles only apply to elements defined in that component's template. In this mode, the framework generates a unique HTML attribute for each component instance, adds that attribute to elements in the component's template, and inserts that attribute into the CSS selectors defined in your component's styles. See more in Angular docs

Consequently, the following component style

因此，以下组件样式

css 复制代码

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

results in something similar to

导致类似于以下的结果：

javascript 复制代码

// _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);
}

To get around that, the Angular docs suggest to use :host-context() in your component styles

为了解决这个问题，Angular 文档建议在组件样式中使用 :host-context()。

css 复制代码

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