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