Styles are wrong when used inside a shadow root about react-native-web

[necolas]

You can't use createRoot directly from react-dom/client, as that doesn't allow the library to insert the style sheet into the shadow DOM. You have to use the render function from RNW

https://codesandbox.io/p/sandbox/react-native-web-shadow-dom-repro-forked-xf696q

However, you shouldn't have to reach into the internals to do this, but the exported render wasn't updated to use React 18's createRoot. I also encountered a couple of other bugs related to this functionality that I'll fix in a patch. I'll post it here for you to try once it's up. Thanks!

[necolas]

The PR related to this issue is #2615

You can install 0.0.0-dee1467a3 to try it out - it's just the PR stacked on top of 0.19.9. Here's an updated code example:

https://codesandbox.io/p/sandbox/react-native-web-shadow-dom-repro-forked-86y3vd

Please try it out in your app, and me know if you encounter any issues, including any issues outside of the shadow DOM. If everything looks good after you've audited your stuff, I can merge the PR and cut a main-line release. Thanks!

[chriscoomber]

Yep, that seems to work for me! Thanks a lot.

I have one question though - it looks like if I define react Contexts outside of the ShadowDomWrapper, they're not available within. Is that to be expected? Is there any way to work around that (aside from re-declaring them all manually in ShadowDomWrapper)?

Example: https://codesandbox.io/p/sandbox/react-native-web-shadow-dom-repro-forked-yn52hj

[necolas]

Yeah that's expected because we're creating a completely new React root. If you want to avoid consuming and re-providing contexts, I think you could render the components into a portal:

function ShadowDomWrapper({ children }) {
  const shadowHost = useRef();
  const shadowRoot = useRef();
  const [portal, setPortal] = React.useState(null);
  useEffect(() => {
    if (shadowHost.current) {
      if (!shadowRoot.current) {
        shadowRoot.current = shadowHost.current.attachShadow({ mode: 'open' });
        // Render dummy content into the shadow DOM for style sheet insertion
        render(<div />, shadowRoot.current);
      }
      setPortal(createPortal(children, shadowRoot.current));
    }
  }, [children]);
  return (
    <div ref={shadowHost}>
      {portal}
    </div>
  );
}

https://codesandbox.io/p/sandbox/react-native-web-shadow-dom-repro-forked-cfddm3

There will be other differences between render and createPortal implementations, e.g., getting event targets propagating from within the shadow dom. React doesn't really support this use case very well, and events-from-within portals are a bit funky.