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 > * 作为选择器：

好像不行。可能只是 google 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 的宿主元素。

Answer 2

解决方法是使用 page.evaluateHandle 来定位 DOM 元素。

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

CSS selector for shadow root or all top level elements in shadow root

html

css

shadow-dom