javascript - 对 :host CSS pseudo class 应用更深入的选择

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;
}

:则不是表示法:

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

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

所以要做:hover再次工作，需要增加Specificity:

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