Consider Evolving to Constructable Stylesheets

[e111077]

Is your feature request related to a problem? Please describe.

I've been trying to integrate stitches into shadow DOM, and have been running into issues since stitches assumes a global stylesheet with no easy way to insert it into a shadow root.

Describe the solution you'd like

Stitches adopt Constructable Stylesheets which can be used in the following manner:

1. Stitches can check if constructable stylesheets are available (Safari) or fallback to current behavior
2. createStitches provides a CSSStyleSheet object or CSSStyleSheet[] array
3. Stitches can apply styles to document via document.adoptedStyles.push() or user can opt out in the init to apply that same instance across roots themselves
4. when stitches modifies the styles it calls CSSStyleSheet.replaceSync() or CSSStyleSheet.replace()

Describe alternatives you've considered

I've been able to have 2 not-great solutions:

1. [link] createStitches, then statically define styles, then use the SSR function to statically inject the string into the shadow root's styles
2. [link] Create stitches once I attach the shadow root and use the undocumented root init to point it to the shadow root

workaround 1 won't update the styles since it's static but it's generally performant and has a shared createStitches across the app

workaround 2 creates multiple createStitches and might break things like theming across the app.

Additional context

1. way-earlier in the constructable stylesheets spec emotion had a look at it for performance reasons
2. Supported on Chrome and FF
3. Reading on Constructable Styleshees (NOTE it references FrozenArray, but that's changed and is now an ObservedArray that can be .push()ed to
4. CSS Import Assertions go hand-in-hand with Constructable Stylesheets and are very performant