影子根的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的主機元素。