Svelte components.
Native targets.

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-svelte-checkbox id="renderer-checkbox" revision="0"></rt-svelte-checkbox>

<button type="button" popovertarget="renderer-popover">Open popover</button>
<rt-svelte-popover id="renderer-popover"></rt-svelte-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.

checkbox.svelte

<svelte:options customElement={{
  shadow: "open",
  props: { revision: { type: "Number", reflect: true } },
  extend: Base => class extends Base {
    constructor() {
      super();
      this.shadowRoot.referenceTarget = "control";
    }
  },
}} />

<script>
  import { onMount } from "svelte";
  import componentStyles from "../shared/components.css";

  let { revision = 0 } = $props();

  onMount(() => {
    const host = $host();
    host.setAttribute("data-renderer-ready", "");
    host.dispatchEvent(new Event("renderer-ready"));
    return () => host.removeAttribute("data-renderer-ready");
  });
</script>

<svelte:element this={"style"}>{componentStyles}</svelte:element>
<div class="component-preview">
  {#key revision}
    <input id="control" type="checkbox" data-revision={revision}>
  {/key}
  <span aria-hidden="true">Native checkbox</span>
</div>
<p class="hint">Render revision {revision}</p>

popover.svelte

<svelte:options customElement={{
  shadow: "open",
  extend: Base => class extends Base {
    constructor() {
      super();
      this.shadowRoot.referenceTarget = "panel";
    }
  },
}} />

<script>
  import { onMount } from "svelte";
  import componentStyles from "../shared/components.css";

  onMount(() => {
    const host = $host();
    host.setAttribute("data-renderer-ready", "");
    host.dispatchEvent(new Event("renderer-ready"));
    return () => host.removeAttribute("data-renderer-ready");
  });
</script>

<svelte:element this={"style"}>{componentStyles}</svelte:element>
<div id="panel" popover="auto" role="dialog" aria-labelledby="panel-title">
  <p class="eyebrow">Svelte custom element · shadow DOM</p>
  <h2 id="panel-title">Rendered with Svelte</h2>
  <p>This native popover lives inside a compiler-generated Svelte custom element.</p>
  <button type="button" popovertarget="panel" popovertargetaction="hide">Close popover</button>
</div>

components.js

import Checkbox from "./checkbox.svelte";
import Popover from "./popover.svelte";
import { whenRendererEvent } from "../shared/renderer-readiness.js";

customElements.define("rt-svelte-checkbox", Checkbox.element);
customElements.define("rt-svelte-popover", Popover.element);

// Svelte mounts its inner component on the next tick after connection. The
// onMount signal waits for that actual render, including its native targets.
export async function whenReady() {
  const hosts = ["renderer-checkbox", "renderer-popover"].map(id => {
    const host = document.getElementById(id);
    if (!host) throw new Error(`Missing Svelte demo host: ${id}`);
    return host;
  });
  await Promise.all(hosts.map(host => whenRendererEvent(host, "Svelte")));
}