是否有可能将CSS :host()与其他伪元素组合起来？

Question

我试图在自定义元素主机的:before伪元素上定义一些样式。我一直在试着在下面的示例中进行修改，但是似乎没有什么效果，我也找不到关于它的信息。有可能吗？如果是的话，我做错了什么？

  :host(.open):before{
    background: grey;
    opacity:.4;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }

这里有一个小提琴来展示这个问题：https://jsfiddle.net/8uzjb7ew/。自定义元素应该有灰色背景，但是没有呈现:before伪元素。

Answer 1

我不确定特定的:host()伪元素，但您可以组合伪元素。

​

div:target{
  background-color:orange;
}
div:before{
  content:"*";
}
div:not(#D):target:before{
  content:"Targeted, not DEF - ";
}

<a href="#A">To ABD</a>
<a href="#D">To DEF</a>
<a href="#G">To GHI</a>

<div id="A">ABC</div>
<div id="D">DEF</div>
<div id="G">GHI</div>

​