A custom base.
Preact rendering.

Each component sets its shadow root’s referenceTarget to the internal target ID. The fallback loads before the component definitions, so it can capture the roots when the renderer creates them and observe later DOM changes.

The page waits for the renderer’s first update before enabling its buttons. Replacing the checkbox changes the component’s revision attribute; the renderer creates a new input with the same ID.

<label for="renderer-checkbox">Send me release notes</label>
<rt-preact-checkbox id="renderer-checkbox" revision="0"></rt-preact-checkbox>

<button type="button" popovertarget="renderer-popover">Open popover</button>
<rt-preact-popover id="renderer-popover"></rt-preact-popover>

The selected setup uses labels({ activation: "focus-and-click", naming: true }) and popoverTargets(). The page’s event listeners only display state; they do not forward label or popover actions.

preact-element.js

import { render } from "preact";

// The custom element owns its lifecycle and shadow root; Preact owns rendering.
export class PreactElement extends HTMLElement {
  static referenceTarget = null;

  constructor() {
    super();
    this.renderRoot = this.attachShadow({ mode: "open" });
    this.renderRoot.referenceTarget = this.constructor.referenceTarget;
    this.updateComplete = Promise.resolve(false);
    this.updatePending = false;
  }

  connectedCallback() {
    this.requestUpdate();
  }

  disconnectedCallback() {
    render(null, this.renderRoot);
  }

  attributeChangedCallback(name, previousValue, value) {
    if (previousValue !== value) this.requestUpdate();
  }

  requestUpdate() {
    if (this.updatePending) return this.updateComplete;
    this.updatePending = true;
    this.updateComplete = Promise.resolve().then(() => {
      this.updatePending = false;
      // A queued update may outlive a removal. Reconnection schedules a new one.
      if (!this.isConnected) return false;
      render(this.render(), this.renderRoot);
      return true;
    });
    return this.updateComplete;
  }

  render() {
    return null;
  }
}

components.js

import { Fragment, h } from "preact";
import { PreactElement } from "./preact-element.js";
import componentStyles from "../shared/components.css";
import { withRendererTimeout } from "../shared/renderer-readiness.js";

class PreactCheckbox extends PreactElement {
  static referenceTarget = "control";
  static observedAttributes = ["revision"];

  get revision() {
    return Number(this.getAttribute("revision")) || 0;
  }

  set revision(value) {
    this.setAttribute("revision", String(value));
  }

  render() {
    return h(Fragment, null,
      h("style", null, componentStyles),
      h("div", { class: "component-preview" },
        h("input", { key: this.revision, id: "control", type: "checkbox", "data-revision": this.revision }),
        h("span", { "aria-hidden": "true" }, "Native checkbox"),
      ),
      h("p", { class: "hint" }, `Render revision ${this.revision}`),
    );
  }
}

class PreactPopover extends PreactElement {
  static referenceTarget = "panel";

  render() {
    return h(Fragment, null,
      h("style", null, componentStyles),
      h("div", { id: "panel", popover: "auto", role: "dialog", "aria-labelledby": "panel-title" },
        h("p", { class: "eyebrow" }, "Preact · shadow DOM"),
        h("h2", { id: "panel-title" }, "Rendered with Preact"),
        h("p", null, "This native popover lives inside a custom element rendered by Preact."),
        h("button", { type: "button", popovertarget: "panel", popovertargetaction: "hide", autofocus: true }, "Close popover"),
      ),
    );
  }
}

customElements.define("rt-preact-checkbox", PreactCheckbox);
customElements.define("rt-preact-popover", PreactPopover);

export async function whenReady() {
  await withRendererTimeout(Promise.all([
    document.getElementById("renderer-checkbox").updateComplete,
    document.getElementById("renderer-popover").updateComplete,
  ]), "Preact");
}