Compiled JSX.
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-stencil-checkbox id="renderer-checkbox" revision="0"></rt-stencil-checkbox>

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

src/components/checkbox.tsx

import { Component, Element, Fragment, h, Prop } from "@stencil/core";

@Component({
  tag: "rt-stencil-checkbox",
  shadow: true,
  styleUrl: "../../../shared/components.css",
})
export class StencilCheckbox {
  @Element() host!: HTMLElement;
  @Prop() revision: number = 0;

  componentDidLoad() {
    const root = this.host.shadowRoot as ShadowRoot & { referenceTarget: string };
    root.referenceTarget = "control";
    this.host.setAttribute("data-renderer-ready", "");
    this.host.dispatchEvent(new CustomEvent("renderer-ready"));
  }

  render() {
    return (
      <Fragment>
        <div class="component-preview">
          <input key={this.revision} id="control" type="checkbox" data-revision={this.revision} />
          <span aria-hidden="true">Native checkbox</span>
        </div>
        <p class="hint">Render revision {this.revision}</p>
      </Fragment>
    );
  }
}

src/components/popover.tsx

import { Component, Element, h } from "@stencil/core";

@Component({
  tag: "rt-stencil-popover",
  shadow: true,
  styleUrl: "../../../shared/components.css",
})
export class StencilPopover {
  @Element() host!: HTMLElement;

  componentDidLoad() {
    const root = this.host.shadowRoot as ShadowRoot & { referenceTarget: string };
    root.referenceTarget = "panel";
    this.host.setAttribute("data-renderer-ready", "");
    this.host.dispatchEvent(new CustomEvent("renderer-ready"));
  }

  render() {
    return (
      <div id="panel" popover="auto" role="dialog" aria-labelledby="panel-title">
        <p class="eyebrow">Stencil component</p>
        <h2 id="panel-title">Rendered with Stencil</h2>
        <p>This native popover lives inside a Stencil component’s shadow root.</p>
        <button type="button" popoverTarget="panel" popoverTargetAction="hide" autoFocus>Close popover</button>
      </div>
    );
  }
}

components.js

import { defineCustomElements } from "../../dist/stencil/index.js";
import { whenRendererEvent } from "../shared/renderer-readiness.js";

defineCustomElements();

// dist-custom-elements does not expose componentOnReady(); wait for the
// componentDidLoad lifecycle instead of guessing how many frames rendering takes.
export async function whenReady() {
  const hosts = ["renderer-checkbox", "renderer-popover"].map(id => {
    const host = document.getElementById(id);
    if (!host) throw new Error(`Missing Stencil demo host: ${id}`);
    return host;
  });
  await Promise.all(hosts.map(host => whenRendererEvent(host, "Stencil")));
}