阴影根或阴影根中所有顶级元素的 CSS 选择器答案

【问题标题】：CSS selector for shadow root or all top level elements in shadow root阴影根或阴影根中所有顶级元素的 CSS 选择器
【发布时间】：2017-07-26 11:01:37
【问题描述】：

我需要一个在影子根内的 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 开发人员工具将影子根元素像这样可视化。

【问题讨论】：

感谢您投反对票。如果您能评论一下您投反对票的原因，那将会很有帮助...

标签： css html shadow-dom

【解决方案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 的宿主元素。

【讨论】：

谢谢！当模式“关闭”（当然是从影子 dom 内部）时，这是否也有效？
太好了，你帮了我很多。我知道 :host 选择器，但我没想到它会在那种情况下工作（以为它只会把我带到那个范围之外，但不会回到......）
我什至会接受它作为答案 - 我只是还在验证（与喝茶交错）
作为跟进：我将您的答案转换为 jsfiddle 并添加了更具体的样式规则（主机上的属性选择器），然后它不再起作用。有什么解释吗？ jsfiddle.net/ex8qam0p/2 - :host 实际上是选择影子根还是宿主元素？
有人亲自问过我。让我在这里添加一些 cmets。 :host[foo=bar] 是无效的语法。那应该是:host([foo=bar]) - jsfiddle.net/ex8qam0p/3。有关详细信息，请参阅drafts.csswg.org/css-scoping/#host-selector。 :host实际上选择了影子主机。任何 CSS 选择器都不会选择影子根，因为影子根不是元素。这是设计使然。

【解决方案2】：

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

【讨论】：

您好 Royer，感谢您提供答案。由于问题相当老，我不会检查它。就像一个提示：最好直接包含答案而不是照片。但是，在您努力改进它之前，请注意：在我看来，它没有回答最初的问题，即要求 CSS 选择器。
同意。我主要是为了我的文档。