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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.