我正在寻找一种从外部设置 shadow DOM 样式的方法。例如,我想将所有“span.special”元素中所有文本的颜色设置为红色。包括来自影子 DOM 的“span.special”元素。我该怎么做?
以前有 ::shadow 伪元素和 /deep/ 组合器 aka >>> 用于此目的。所以我可以写类似的东西
span.special, *::shadow span.special {
color: red
}
但现在 ::shadow、/deep/ 和 >>> 已弃用。那么,我们有什么可以替代它们呢?
最佳答案
我确实尝试了很多方法,包括此处描述的方法。由于我使用的是外部 Web 组件库,因此我无权修改这些组件。因此,唯一对我有用的解决方案是使用 JS querySelector
,如下所示:
document.querySelector("the-element.with-shadow-dom")
.shadowRoot.querySelector(".some-selector").setAttribute("style", "color: black");
不是最好的解决方案,不适合大型样式,但对于小的改进确实有效。
@John 这是用 Chrome 83.0.4103.116 测试的(仍将在 Safari 中测试),我为 Ionic (v5) ion-toast
组件做了测试。这是我使用的(几乎)真实代码:
import { toastController } from '@ionic/core';
let toastOpts = {
message: "Some message goes here.",
cssClass: "toast-with-vertical-buttons",
buttons: [
{
text: "Button 1",
side: 'end'
},
{
text: "Button2",
side: 'end'
},
{
icon: "close",
side: "start"
}
]
}
toastController.create(toastOpts).then(async p => {
let toast = await p.present(); // this renders ion-toast component and returns HTMLIonToastElement
toast.shadowRoot.querySelector('div.toast-button-group-end').setAttribute("style", "flex-direction: column");
});
关于javascript - 从外部看 Shadow DOM 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37352637/