如何在阴影上应用样式 DOM

Question

我正在尝试在阴影上应用一些样式 DOM。我有这个例子：

const existingElement = document.getElementById("foo");
const shadow = existingElement.attachShadow({ mode: "open" });
const message = document.createElement("p");

message.setAttribute("class", "text");
message.textContent = "Hello World!";
shadow.appendChild(message);

#foo::shadow .text{
  color: blue; //not working
}

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

在代码片段中，我在 <div id="foo"></div>

内的影子根中生成了一个 <p class="text">Hello World!</p>

我需要对 class text 应用样式，但由于它在阴影内 DOM 我无法直接应用任何样式。我试过 ::shadow、::ng-deep、::content 但还没有结果。有什么想法吗？

Answer 1

我一直在努力查找有关此的一些信息。我发现阴影元素与环境的其他部分完全分开。虽然作为 link 下面的统计数据

It’s worth noting that inheritable styles like color, font and line-height are still inherited in a shadow DOM. To prevent that, use all: initial or, preferably, all: revert once it has better browser support.

Styling in the Shadow DOM With CSS Shadow Parts

我试过你的一些代码并做了这样的东西。这使得外部 css 对阴影 dom.

产生影响

const existingElement = document.getElementById("foo");
const shadow = existingElement.attachShadow({ mode: "open" });
const message = document.createElement("p");

message.setAttribute("part", "text");
message.textContent = "Hello World!";
shadow.appendChild(message);

#foo::part(text) {
  color: blue; 
}

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

您设置了 part，而不是让 setAttribute 设置 class。这似乎得到了你想要的效果。还需要说明的是，您可以在 JavaScript 中设置属性以直接对其应用样式。

如何在阴影上应用样式 DOM

How to apply styles on shadow DOM

html

javascript

css

shadow-dom

angular