javascript - 从外部看 Shadow DOM 样式

Question

我正在寻找一种从外部设置 shadow DOM 样式的方法。例如，我想将所有“span.special”元素中所有文本的颜色设置为红色。包括来自影子 DOM 的“span.special”元素。我该怎么做？

以前有 ::shadow 伪元素和 /deep/ 组合器 aka >>> 用于此目的。所以我可以写类似的东西

span.special, *::shadow span.special {
    color: red
}

但现在 ::shadow、/deep/ 和 >>> 已弃用。那么，我们有什么可以替代它们呢？

Answer 1

我确实尝试了很多方法，包括此处描述的方法。由于我使用的是外部 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");
  });