Modify CSS inside a Shadow DOM (Lit-Element)

Question

I have a hidden DOM created by a third party. I want to configure the application of a bold style on the word "Power", considering that when the legend tag of "Power" is entered, the following div and span are generated, within the shadow DOM. How can I achieve this through 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>

Some response this.shadowRoot.querySelector from Lit-Element

Answer 1

By design, we cannot target elements inside a Shadow DOM using CSS selectors. However, elements inside a Shadow DOM do inherit CSS just as any other element.

In your case, if there are no conflicting CSS styles, we can make the container bold and it should cause its children to be so as well.

If there is indeed some styling that overrides the inherited font weight, then your last resort is to use some JavaScript to inject styles into the 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>