Create a single combined CSSStyleSheet from global styles. Convenient to add global styles to Shadow DOM.

combiledStyleSheet.mjs

export const combiledStyleSheet = new CSSStyleSheet();
const allRules = [...document.styleSheets]
  .flatMap((ss) => {
    try {
      return [...ss.cssRules].map((rule) => rule.cssText);
    } catch {
      return []; // Skip cross-origin stylesheets
    }
  })
  .filter(Boolean);
combiledStyleSheet.replaceSync(allRules.join(""));

Example on how to use with Web Component:

class TestComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.adoptedStyleSheets = [combiledStyleSheet];
  }

  connectedCallback() {
    // .bg-red is from the global CSS (tailwind or whatever)
    this.innerHTML = `<h1 class="bg-red">Test</h1>`;
  }
}