import { render, h } from 'https://cdn.skypack.dev/preact@10.5.7';
/** @jsx h */
function App() {
return <div>A Preact component rendered into a shadow DOM</div>;
}
let shadowTarget = document.createElement("div");
shadowTarget.id = "shadow-target";
document.body.appendChild(shadowTarget);
let shadow = shadowTarget.attachShadow({ mode: "open" });
let shadowRoot = document.createElement("div");
shadowRoot.id = "shadow-root";
shadow.appendChild(shadowRoot);
render(<App />, shadowRoot);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.