影子根或影子根中所有顶级元素的 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 会在 shadow dom 中完成这项工作，但事实并非如此。

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

更新:

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

好像不行。可能只是谷歌浏览器开发者工具将影子根元素可视化。

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 的宿主元素。