对 :host CSS 伪 class 应用更深入的选择

Question

我正在制作一个自定义元素，并且一直在寻找一种方法来为与阴影 DOM 关联的 :host 伪 class 添加更多特异性。据我了解，它用于 select 实际的自定义元素本身。例如，如果我有一个名为 my-elem 的元素，它附加了一个影子 DOM，那么 :host 伪 class 将等同于 class under [=13] =] 在全局样式表中。

据此我想尝试进一步指定 select 或以便我可以根据其状态设置自定义元素的样式，例如：:host:not(.active)。但是，我真的找不到任何关于 :host 的进一步细节的阅读材料，并且使用上述内容不起作用。

我也尝试过传统的 :host.active 甚至厚颜无耻的 :host[active] 但是 none 它们都有效。

所以我想问问这是否可能。我已经在网上进行了一些搜索，但网上似乎并没有那么多关于此事的信息，我觉得这可能是不可能的，所以我可能必须降低一个级别并应用活动 class 到状态更改时自定义元素的包装器。

我只是想这样做，因为它允许我以编程方式设置父元素的样式（我将 active/inactive 样式应用于自定义元素表单的自定义幻灯片）。

提前致谢。

Answer 1

:host(.active) 用于 Class 选择器符号：

<my-element class="active" ></my-element>"

.

:host([active]) 用于属性选择器符号：

<my-element active="..." ></my-element>"

.

我想你的意思是使用 :active 伪 Class，比如 :hover

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

语法正确:

:host(:active){
  color:yellow;
}

如果您的元素中也有 :hover：

:host(:hover){
  color:green;
}

然后你需要强制特异性（https://css-tricks.com/specifics-on-css-specificity/）：

:host(:active:active){
  color:yellow;
}

:不是符号那么是:

:host(:not(:active)){
  color:grey;
}

这个当然比:hover

有更高的特异性

所以要使 :hover 再次工作，您需要增加特异性：

:host(:hover:hover){
  color:green;
}

JSFiddle playground with :host & :slotted CSS:

https://jsfiddle.net/CustomElementsExamples/hrwjumkq/

对 :host CSS 伪 class 应用更深入的选择

Applying more in depth selection to the :host CSS pseudo class

javascript

css

css-selectors

pseudo-class

web-component