阴影根的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 - 选择器可以在阴影dom中完成工作，但事实并非如此。

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

更新

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

似乎不起作用。可能只是谷歌浏览器开发人员工具可视化阴影根元素。

Answer 1

使用此选择器：:host > *

:host

中描述了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>`选择器

＆＃13;

＆＃13;

<my-element>
</my-element>

＆＃13;

:host

＆＃13;

＆＃13;

＆＃13;

:host([foo=bar])也可能包含复合选择器，必须放在括号中。例如。 foo选择属性bar设置为RewriteEngine on # Force SSL RewriteCond %{HTTPS} !=on RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] RewriteCond $1 !^(blog) RewriteCond %{HTTP_HOST} ^`.com$ [NC,OR] RewriteCond %{HTTP_HOST} ^www.`.com$ RewriteCond %{REQUEST_URI} !public/ RewriteRule (.*) /public/$1 [L] RewriteRule ^(.+)$ /index.php [L] 的主机元素。

Answer 2

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