Cannot use SUID to build web components

[vorth]

I'm porting a web component implementation from React (material-ui) to Solid JS. With MUI, I found a workaround to make JSS attach the style elements to the web component's shadow DOM rather than the document head. No such workaround seems possible for SUID:

suid/packages/css/src/dom/appendStyleElement.ts

Line 14 in fe83bfe

const head = document.head || document.getElementsByTagName("head")[0];

This means that only a single web component per page would function, at best... and it appears that styling is broken even in that case within the web component.

[juanrgm]

Any proposal?

[credred]

Same problem. can StyledEngineProvider provide an option to modify the location of the added style?

[juanrgm]

Could you put a link to the emotion/mui docs where it "fixes" this problem?

[vorth]

Here is the snippet I had in my React code, wrapping the main component element with a StylesProvider. This may not be very helpful, as I was still using MUI 4 and JSS, not Emotion.

import { StylesProvider, jssPreset } from '@material-ui/styles';
...
  // We need JSS to inject styles on our shadow root, not on the document head.
  // I found this solution here:
  //   https://stackoverflow.com/questions/51832583/react-components-material-ui-theme-not-scoped-locally-to-shadow-dom
  const jss = create({
      ...jssPreset(),
      insertionPoint: container
  });
  const reactElement = React.createElement( StylesProvider, { jss: jss }, [ viewerElement ] );

Here is a clickable link for that URL