影子根的CSS选择器或影子根中的所有顶级元素

Question

我需要一个选择器用于影子根目录中的css，该影子根目录选择影子根目录的所有子项（但不是大孩子），无论它们是什么标记并没有给他们一个ID。

在下面的例子中，SPAN，A，P和DIV应该会得到一个红色的边框，但是不能是SPAN IN DIV。

<my-element> 
    #shadow-root 
    <span>SPAN</span> 
    <a>A</a> 
    <p>P</p> 
    <div> 
     DIV 
     <span>SPAN IN DIV</span> 
    </div> 
    <style> 
     :root>*{border:1px red solid;} 
    </style> 
</my-element> 

我希望的，:root -Selector会做一个影子DOM内的工作，但多数民众赞成并非如此。

如果有人演示如何在影子根上设置ID，这也是一种可行的解决方案。

更新：

尝试使用#shadow-root > *作为选择：

似乎不起作用。可能它只是谷歌Chrome开发者工具，可视化这样的阴影根元素。

Answer 1

使用此选择器：:host > *

的:host选择器在https://drafts.csswg.org/css-scoping/#host-selector

document.querySelector('my-element') 
 
    .attachShadow({ mode: 'open' }) 
 
    .innerHTML = ` 
 
    <span>SPAN</span> 
 
    <a>A</a> 
 
    <p>P</p> 
 
    <div> 
 
     DIV 
 
     <span>SPAN IN DIV</span> 
 
    </div> 
 
    <style> 
 
     :host>*{border:1px red solid;} 
 
    </style>`

<my-element> 
 
</my-element>

:host描述也可以保持化合物选择器，它必须是在括号中的地方。例如。 :host([foo=bar])选择属性foo设置为bar的主机元素。