无法将CSS添加到Shadow DOM元素中。

Question

我试图通过添加类来为影子根内部的元素添加CSS样式。 我有一个Angular组件，其中包含： CSS

.test {
    border: 1px solid red;
}

TS

document.getElementById('my-div').shadowRoot.querySelector('.some-wrapper').classList.add('test')

问题在于我能看到class被添加了，但是这个class似乎是空的，没有为元素添加任何CSS样式，只添加了class。 我的做法有问题吗？

- Juraj Jakubov

Answer 1

为了使你的样式在 Shadow DOM 中生效，你应该使用 :host([selector])。

:host(.test ) {
    border: 1px solid red;
}

:host选择器允许选择影子宿主（包含影子树的元素）。一般来说，局部样式只在影子树内起作用，文档样式则在外部起作用。但也有少数例外情况。影子宿主是一个包含影子根的DOM节点。它是父页面中的常规元素节点，在其中托管了作用域受限的影子子树。位于影子宿主下的任何子节点仍然可选择，除了影子根。

- Joosep Parts

---

谢谢您的解释。您知道有任何例外情况吗，这种方法无法工作吗？我正在尝试实现它，但我发现即使我添加:host(.test)，元素仍具有class test，但其CSS并没有生效。 - Juraj Jakubov

这在我的情况下不起作用。 - TCH