阴影根或阴影根中所有顶级元素的 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.c​​sswg.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。