Skip to content

Instantly share code, notes, and snippets.

@shunkakinoki

shunkakinoki/chakra-ui-under-shadow-root.ts

Forked from mizchi/chakra-ui-under-shadow-root.ts
Last active October 23, 2022 16:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shunkakinoki/e7268b1be97d3ce837311fb6c46cdc2b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shunkakinoki/e7268b1be97d3ce837311fb6c46cdc2b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mizchi mizchi created this gist Jul 29, 2021.
    50 changes: 50 additions & 0 deletions chakra-ui-under-shadow-root.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    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;