将更多深度选择应用于：host CSS伪类 [英] Applying more in depth selection to the :host CSS pseudo class

问题描述

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

I am making a custom element and have been searching for a way of adding more specificity to the :host pseudo class which is associated with the shadow DOM. From my understanding it is used to select the actual custom element itself. For example, if I had an element called my-elem which had a shadow DOM attached the :host pseudo class would be equivalent to a class under my-elem in a global stylesheet.

由此，我想尝试进一步指定选择器，以便可以在其状态下设置自定义元素的样式，例如：：host：不是（.active）。但是，我真的找不到关于：host 的进一步特异性的任何读物，并且使用上述方法不起作用。

From this I wanted to try and further specify the selector so that I could style the custom elements on their state, for example: :host:not(.active). However, I cannot really find any reading on further specificity regarding the :host and using the aforementioned does not work.

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

I have also tried the traditional :host.active and even the cheeky :host[active] however none of them work.

所以我想问一下这是否有可能。我已经在网上进行了一些搜索，但实际上似乎并没有那么多在线内容，而且我认为这不可能，所以我可能必须下一层级并将活动类应用于包装器

So I wanted to ask if this is even possible. I have done some searching online but there doesn't really seem to be all that much online on the matter and I feel that it may not be possible so I will, possibly have to go a level down and apply the active class to the wrapper of the custom element upon state change.

我只是想这样做，因为它允许我以编程方式设置其父元素的样式（我将active /无效的样式添加到自定义元素表单的自定义幻灯片）。

I just wanted to do it this way as it allows me to programatically style the elements from their parent (I am apply the active/inactive styles to custom slides of a custom element form).

预先感谢您。

推荐答案

• ：host（.active）用于类选择器表示法：

  • :host(.active) is for a Class selector notation:

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

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

    。

    
    

    • ：host（[active]）用于属性选择器表示法：

    • :host([active]) is for an Attribute selector notation:

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

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

    。

    我想您的意思是使用 ：active 伪类，例如：悬停

    I presume you mean to use the :active Pseudo-Class, like :hover

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/伪类

    正确的语法：

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

    如果您也有：悬停在您的元素中：

    If you also have a :hover in your element:

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

    您需要强制使用特异性（ https://css-tricks.com/specifics-on-css-specificity/ ），其中：

    You need to force Specificity (https://css-tricks.com/specifics-on-css-specificity/) with:

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

    ：当时的注释是：

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

    当然，该 的特异性高于 ：hover

    This of course has higher Specificity than :hover

    要使：hover 再次起作用，您需要：

    So to make :hover work again you need:

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

    JSF带有：host& ：slotted CSS：

    https：// jsfiddle。 net / CustomElementsExamples / hrwjumkq /

    这篇关于将更多深度选择应用于：host CSS伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！