在 Shadow DOM (Lit-Element) 中修改 CSS

Question

我有一个由第三方创建的隐藏 DOM。我想在“Power”这个词上配置应用一个bold样式，考虑到当输入“Power”的legend标签时，会生成下面的div和span，在shadow DOM内。我怎样才能通过 CSS 实现这一点？

<forex-web-form-fieldset id="fieldset-security-advice-desktop" help-label="Help" legend="Power">
    #shadow-root (open)
      <div class="legend">
        <span class="label" aria-disabled="false">Power</span>
      </div>
</forex-web-form-fieldset>

来自 Lit-Element 的一些响应 this.shadowRoot.querySelector

Answer 1

根据设计，我们无法使用 CSS 选择器定位 Shadow DOM 内的元素。然而，Shadow DOM 中的元素确实像任何其他元素一样继承 CSS。

在您的情况下，如果没有冲突的 CSS 样式，我们可以将容器设置为粗体，并且它应该会导致其子级也如此。

如果确实有一些样式覆盖了继承的字体粗细，那么你最后的手段是使用一些 JavaScript 将样式注入到 Shadow DOM 中。

  const it = document.querySelector("forex-web-form-fieldset");
  const shadow = it.attachShadow({ mode: "open" });

  shadow.innerHTML = `
     <div class="legend">
        <span class="label" aria-disabled="false">Power</span>
      </div>
    `;

  forex-web-form-fieldset {
    font-weight: bold;
  }

<forex-web-form-fieldset legend="Power"> </forex-web-form-fieldset>