chakra-ui-under-shadow-root.ts

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, DarkMode, Button, LightMode } from "@chakra-ui/react";
import type { ApplicationProps } from "../../shell/src/types";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

function Root(props: ApplicationProps) {
  return (
    <>
      <LightMode>
        <Button>In Light Mode</Button>
      </LightMode>
      <DarkMode>
        <Button>In Dark Mode(Broken)</Button>
      </DarkMode>
    </>
  );
}

const run = (props: ApplicationProps) => {
  const root = props.getRoot();
  const shadowRoot = root.attachShadow({ mode: "open" });
  const myCache = createCache({
    // @ts-ignore
    container: shadowRoot,
    key: "c",
  });
  const rootElement = document.createElement("main");
  shadowRoot.appendChild(rootElement);

  ReactDOM.render(
    <React.StrictMode>
      <CacheProvider value={myCache}>
        <ChakraProvider>
          <DarkMode>
            <Root {...props} />
          </DarkMode>
        </ChakraProvider>
      </CacheProvider>
    </React.StrictMode>,
    rootElement
  );

  return () => {
    ReactDOM.unmountComponentAtNode(root);
  };
};

export default run;