将更多的深度选择应用于:host CSS伪类

问题描述 投票:0回答:1

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

由此,我想尝试并进一步指定选择器,以便可以在自定义元素的状态上设置样式,例如::host:not(.active)。但是,我真的找不到关于:host的进一步特异性的任何读物,使用上述方法是行不通的。

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

所以我想问问这是否有可能。我已经在网上进行了一些搜索,但是实际上并没有那么多在线内容,而且我认为这不可能,所以我可能必须下一层级并将活动类应用于包装器状态更改时自定义元素的位置。

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

谢谢你。

javascript css css-selectors web-component pseudo-class
1个回答
0
投票
  • [.active您的问题是一个类选择器表示法

  • [[active]您的问题是一个属性选择器符号

我想您的意思是使用: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重新工作,您需要:

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

JSFiddle游乐场,带有:host和:slotted CSS:

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

© www.soinside.com 2019 - 2024. All rights reserved.