在 Shadow dom 中设置元素的样式

Question

我正在应用程序之上应用自定义 CSS 样式，但我无法修改其代码。

以前的 DOM 是这样的：

<div class="foo">
  <div class="bar"></div>
</div>

我可以使用

.foo .bar

轻松修改它。

但是他们发布了应用程序的新版本，现在孩子位于影子 DOM 中：

<div class="foo">
  #shadow-root
    <div class="bar"></div>
</div>

显然我以前的选择器不再起作用了。仅当它位于

.bar

内时，我怎样才能到达此

.foo

？我读到了 ::part()，但我无法在 DOM 元素上添加

part="bar"

。谢谢您的帮助。

Answer 1

目前仅使用CSS，如果不使用

part

，则无法从外部target子元素。这是有意为之，其动机是为了允许 Shadow DOM 创建者完全控制暴露在外部的样式。

但是，如果允许 JavaScript 并且 Shadow DOM 是使用模式

open

创建的，则可以使用

shadowRoot.querySelector

来定位子元素。

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const div = document.createElement("div");
div.className = "bar";
div.textContent = "I'm in the shadow DOM";
shadow.appendChild(div);


document.querySelector("#host").shadowRoot.querySelector(".bar").style.color = "red";

<div id="host" class="foo"></div>

您还可以使用 JavaScript 注入样式，其中包含针对

bar

的规则，但同样仅当模式为

open

时。