将 CSS 添加到 shadow-root 元素将不起作用

【问题标题】：Adding CSS to shadow-root element wont work将 CSS 添加到 shadow-root 元素将不起作用
【发布时间】：2022-02-09 15:52:12
【问题描述】：

我正在尝试通过向其添加类来将 CSS 添加到 shadow-root 内的元素。我有角度分量。 CSS

.test {
    border: 1px solid red;
}

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

问题是我可以看到添加了类，但该类似乎是空的，就像它没有向仅元素类添加 CSS。我做错了什么？

【问题讨论】：

【解决方案1】：

要使您的样式在 Shadow DOM 中工作，您应该使用 :host([selector])：

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

:host 选择器允许选择影子主机（包含影子树的元素）。作为一般规则，本地样式仅在阴影树内部起作用，而文档样式在它之外起作用。但也有少数例外。影子主机是一个包含影子根的 DOM 节点。它是父页面中的一个常规元素节点，它承载了作用域影子子树。位于影子主机下的任何子节点仍然可以选择，影子根除外。

【讨论】：