Web Component Shadow Root Pierer

shadowStyler.js

class ShadowStyler {
  constructor(componentName) {
    this.componentName = componentName;
    this.element = document.querySelector(this.componentName);
    this.shadowRoot = this.element?.shadowRoot;
  }

  setStyle(selector, styles) {
    if (this.shadowRoot) {
      this._applyStyle(selector, styles);
    } else {
      // If shadow root isn't available yet, queue the style change to be applied later.
      let retryCount = 0;
      const maxRetries = 50;  // for a total of 5 seconds (50 retries x 100ms)
      const retryInterval = setInterval(() => {
        this.shadowRoot = this.element?.shadowRoot;
        if (this.shadowRoot || retryCount >= maxRetries) {
          clearInterval(retryInterval);
          if (this.shadowRoot) {
            this._applyStyle(selector, styles);
          } else {
            console.warn('Max retries reached. Shadow root not found.');
          }
        }
        retryCount++;
      }, 100);
    }
  }

  _applyStyle(selector, styles) {
    const elements = this.shadowRoot.querySelectorAll(selector);
    if (!elements.length) {
      console.warn(`No elements found for selector: ${selector}`);
      return;
    }

    Object.entries(styles).forEach(([property, value]) => {
      elements.forEach(element => {
        element.style[property] = value;
      });
    });
  }
}

// Usage:
const styler = new ShadowStyler('form-embed');
styler.setStyle('.myClass', { background: 'red' });