Adopted stylesheets support

It would be useful if we could target a constructed stylesheet which we can then use via shadowRoot.adoptedStyleSheets = [twindSheet].

This would allow us to create the stylesheet once and re-use it across multiple web components without having the side effect of polluting the root document’s styles.

I’ve had a read through the source and it seems the current “sheet” implementation is using CSSOM to add rules to a stylesheet already. However, its default target is a style tag appended to the DOM.

So maybe its as simple as having a different target in the existing cssom sheet? A reference to a sheet rather than one we have in DOM.

Though then the question is, how do we get hold of that per web component?

class SomeElement extends HTMLElement {
  // ...

  connectedCallback() {
    // how do we get hold of this sheet?
    this.shadowRoot.adoptedStyleSheets = [REF_TO_TWIND_SHEET];
  }

  // Assume this just ends up appending to this.shadowRoot
  render() {
    return `<div class="${tw`bg-black`}">Foo</div>`;
  }
}

As you can see, we’d probably need to create the stylesheet ourselves and tell twind to append to it. Like during setup() of twind.

Though that leaves us with a choice to make too:

• a monolithic global twind sheet (i.e. we can only setup() once, which means we can only have one tailwind stylesheet to contain everything)
• somehow per-module tell twind which sheet to use (like a setup() per es module)

Could do with some christmas coding so would be happy to have a go at this once i get my head around it

[sastan]

Thanks. That means a lot. Closing it now.

Feel free to reopen if you something is not working as expected.

[43081j]

I guess it means in your example, a stylesheet would exist per component. Whereas if we reused the same one across modules, we could have one monolithic TW stylesheet many components can adopt.

Not sure if either way is better than the other. This way we keep each component contained at least, so each one has its own tw stylesheet. Which can mean some duplication but less risk of side effects etc

Guess I’m saying i like your way better 😂