import*asReactfrom"react";import*asReactDOMfrom"react-dom/client";import{createPortal}from"react-dom";import{Dialog}from"@base-ui-components/react/dialog";/** * Dialog rendered entirely inside an iframe (similar to CodeSandbox behavior). * The whole React subtree (trigger + popup) is portaled into the iframe's body. */exportfunctionExampleDialog({  portalContainer,}:{portalContainer:HTMLElement|ShadowRoot;// generalized beyond ShadowRoot}){return(<Dialog.Root><Dialog.Trigger>Open Dialog</Dialog.Trigger><Dialog.Portalcontainer={portalContainer}><Dialog.Backdropstyle={{position:"fixed",inset:0,background:"#00000022"}}/><Dialog.Popupstyle={{position:"fixed",top:"30%",border:"1px solid",background:"white",padding:10,}}><Dialog.Title>Title</Dialog.Title><Dialog.Description>Dialog Description</Dialog.Description><Dialog.Close>Close</Dialog.Close></Dialog.Popup></Dialog.Portal></Dialog.Root>);}/** * Hosts the React dialog UI inside an iframe for isolation. */functionIFrameHost(){const[iframeEl,setIframeEl]=React.useState<HTMLIFrameElement|null>(null);constmountNode=iframeEl?.contentWindow?.document.body??null;constensureDefinition=React.useCallback((doc:Document)=>{constwin=doc.defaultView;if(!win)return;if(win.customElements.get("webcomponent-example"))return;constOuterReactDOM=ReactDOM;classWebcomponentExampleextendswin.HTMLElement{private_shadow:ShadowRoot;private_mountEl?:HTMLDivElement;private_reactRoot?:ReturnType<typeofOuterReactDOM.createRoot>;constructor(){super();this._shadow=this.attachShadow({mode:"open"});}connectedCallback(){if(this._reactRoot)return;this._mountEl=(this.ownerDocument||doc).createElement("div");this._shadow.appendChild(this._mountEl);this._reactRoot=OuterReactDOM.createRoot(this._mountEl);this._reactRoot.render(<ExampleDialogportalContainer={this._shadow}/>);}disconnectedCallback(){if(this._reactRoot){this._reactRoot.unmount();this._reactRoot=undefined;}if(this._mountEl&&this._mountEl.parentNode){this._mountEl.parentNode.removeChild(this._mountEl);this._mountEl=undefined;}}}win.customElements.define("webcomponent-example",WebcomponentExample);},[]);React.useLayoutEffect(()=>{if(mountNode){mountNode.style.margin="0";ensureDefinition(mountNode.ownerDocument);}},[mountNode,ensureDefinition]);return(<iframeref={setIframeEl}// about:blank same-origin content; no srcDoc so load event is implicitwidth={"100%"}height={400}style={{border:"1px solid #ccc"}}title="Dialog IFrame Sandbox">{mountNode&&createPortal(// Render custom element after it's defined in that documentReact.createElement("webcomponent-example"),mountNode)}</iframe>);}exportdefaultfunctionExample(){return<IFrameHost/>;}