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

Question

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

从这里我想尝试进一步指定选择器，以便我可以根据它们的状态设置自定义元素的样式，例如：:host:not(.active)。但是，我真的找不到任何关于:host 的详细信息，并且使用上述内容不起作用。

我也尝试过传统的:host.active，甚至是厚脸皮的:host[active]，但它们都不起作用。

所以我想问这是否可能。我已经在网上进行了一些搜索，但似乎并没有太多关于这件事的在线搜索，我觉得这可能是不可能的，所以我可能不得不降低一层并将活动类应用于包装器状态变化时的自定义元素。

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

提前谢谢你。

Answer 1

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

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

.

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

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

.

我猜你的意思是使用 :active 伪类，比如: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;
}

:not notation is then:

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

这个当然比:hover具有更高的特异性

所以要让:hover 再次工作，你需要增加Specificity：

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

带有 :host & :slotted CSS 的 JSFiddle 游乐场：

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