← Back to context

Comment by spankalee

12 hours ago

One problem I think people are going to run into here is loading CSS libraries from the components that use them.

Luckily, CSS Modules are starting to land in multiple browsers. Firefox added support behind a flag, and it might ship in 145.

So you'll be able to import the CSS from your JS modules, and apply it to the document:

    import extras from 'css-extras' with {type: 'css'};

    if (!document.adoptedStyleSheets.includes(extras)) {
      document.adoptedStyleSheets.push(extras);
    }

Or, if you use shadow DOM:

    this.shadowRoot.adoptedStyleSheets.push(extras);