import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import{M as r}from"./index-DLgQDw3r.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-Cf-Lpz6Y.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(o){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...s(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
`,e.jsx(n.h1,{id:"shadow-dom",children:"Shadow DOM"}),`
`,e.jsx(n.h2,{id:"using-a-shadow-dom-with-odyssey",children:"Using a Shadow DOM with Odyssey"}),`
`,e.jsx(n.p,{children:"Sometimes, you may need to sandbox your application's styles so Odyssey components show up correctly in other applications. This typically happens when other global styles are on the page."}),`
`,e.jsx(n.p,{children:"To sandbox your application's styles, you need to use a Shadow DOM. We now recommend rendering into a Web Component which includes a Shadow DOM."}),`
`,e.jsxs(n.p,{children:["Odyssey natively supports rendering React in a Web Component's Shadow DOM. Simply use the ",e.jsx(n.code,{children:"renderReactInWebComponent"})," in your app's top-level file (typically ",e.jsx(n.code,{children:"index.ts"}),"):"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { renderReactInWebComponent } from "@okta/odyssey-react-mui/web-component";

const appRootElement = document.createElement("div");
const containerRootElement = document.getElementById("container-root");

const reactElement = renderReactInWebComponent({
  getReactComponent: ({ appRootElement, emotionRootElement }) => (
    <OdysseyProvider
      appRootElement={appRootElement}
      emotionRootElement={emotionRootElement}
    >
      <App />
    </OdysseyProvider>
  ),
  rootElement: containerRootElement,
  webComponentChildren: appRootElement,
});
`})}),`
`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"reactElement"})," is the actual rendered web component DOM node. To look inside, you'll need to use ",e.jsx(n.code,{children:"reactElement.shadowRoot"}),"."]}),`
`,e.jsx(n.h2,{id:"advanced-usage-custom-emotion-cache",children:"Advanced Usage (Custom Emotion Cache)"}),`
`,e.jsxs(n.p,{children:["If you are using a shadow DOM and a separate Emotion Cache in your application for other CSS styles within your app, you'll need to create an instance of ",e.jsx(n.code,{children:"Emotion"})," and supply it a container reference to the created ",e.jsx(n.code,{children:"emotionRootElement"})," above:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-ts",children:`// utils.ts

// Assumes the ID of the root element of your web application to be \`root\`
// The ID of the \`emotionRoot\` style element is \`style-root\`

import createEmotion from "@emotion/css/create-instance";

export const getEmotionCss = () => {
  const { css: emotionCss } = createEmotion({
    container:
      document
        .querySelector("#root")
        ?.shadowRoot?.querySelector("#style-root") || undefined,
    key: "css",
    nonce: window.cspNonce,
    prepend: true,
  });

  return emotionCss;
};
`})}),`
`,e.jsx(n.p,{children:"Then in your code, you can do something like:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`// MyComponent.tsx

import { getEmotionCss } from "./utils";

export const MyComponent = () => {
  const emotionCss = getEmotionCss();

  const componentStyle = css\`
    backgroundcolor: white;
  \`;

  return <div className={componentStyle}>{/* ... */}</div>;
};
`})}),`
`,e.jsxs(n.p,{children:["If you're using separate ",e.jsx(n.code,{children:"OdysseyThemeProvider"})," and ",e.jsx(n.code,{children:"OdysseyCacheProvider"})," components, both of those also take the ",e.jsx(n.code,{children:"appRootElement"})," element."]})]})}function j(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(t,{...o})}):t(o)}export{j as default};
