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

Question

我正在制作一个自定义元素，并且一直在寻找一种向:host与 shadow DOM 关联的伪类添加更多特异性的方法。根据我的理解，它用于选择实际的自定义元素本身。例如，如果我有一个被调用的元素my-elem附加了一个 shadow 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>"

.

我想你的意思是使用:activePseudo-Class，比如:hover

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

正确的语法：

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

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

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

您需要使用以下内容强制特定性（https://css-tricks.com/specifics-on-css-specificity/）：

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

:not 符号是：

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

这当然比:hover

因此，要:hover再次工作，您需要：

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

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

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