Reference
Target.

Explicit-label markup. Fallback setup hydrates data-reference-target; styling and readiness flags are omitted.

<label id="lj-checkbox-label" for="lj-checkbox-host">Send me release notes</label>
<rt-gallery-checkbox id="lj-checkbox-host" data-reference-target="control">
  <template shadowrootmode="open" shadowrootreferencetarget="control">
    <label class="visually-hidden" for="control">Release notes preference</label>
    <input id="control" type="checkbox">
  </template>
</rt-gallery-checkbox>

Manual popover with an internal close button.

<button id="pt-toggle" type="button" popovertarget="pt-host"
    popovertargetaction="toggle">Toggle panel</button>
<rt-popover-target-demo id="pt-host" data-reference-target="pt-panel">
  <template shadowrootmode="open" shadowrootreferencetarget="pt-panel">
    <section id="pt-panel" popover="manual" role="dialog"
        aria-labelledby="pt-panel-title">
      <h2 id="pt-panel-title">The host leads here</h2>
      <button id="pt-close" type="button" popovertarget="pt-panel"
          autofocus
          popovertargetaction="hide">Close panel</button>
    </section>
  </template>
</rt-popover-target-demo>

Outside command, private dialog, internal close handler.

<button id="dc-show" type="button" commandfor="dc-host"
    command="show-modal">Show modal</button>
<rt-closed-dialog-demo id="dc-host"></rt-closed-dialog-demo>

// Run component code after any fallback setup has finished.
const host = document.getElementById('dc-host');
const root = host.attachShadow({
  mode: 'closed', referenceTarget: 'dc-dialog',
});
root.innerHTML = `
  <dialog id="dc-dialog" aria-labelledby="dc-dialog-title">
    <h2 id="dc-dialog-title">A moment of focus</h2>
    <button id="dc-internal-close" type="button">Close dialog</button>
  </dialog>
`;
const dialog = root.getElementById('dc-dialog');
root.getElementById('dc-internal-close').addEventListener('click', () => {
  dialog.close('closed-inside');
});

Three commands share one target. The demo also listens for cancellation.

<button id="pc-toggle" type="button" commandfor="pc-host"
    command="toggle-popover">Toggle with a command</button>
<button id="pc-show" type="button" commandfor="pc-host"
    command="show-popover">Show with a command</button>
<button id="pc-hide" type="button" commandfor="pc-host"
    command="hide-popover">Hide with a command</button>
<rt-popover-command-demo id="pc-host" data-reference-target="pc-panel">
  <template shadowrootmode="open" shadowrootreferencetarget="pc-panel">
    <section id="pc-panel" popover="manual" role="dialog"
        aria-labelledby="pc-panel-title">
      <h2 id="pc-panel-title">A panel with a say</h2>
      <button type="button" autofocus>Close from inside</button>
    </section>
  </template>
</rt-popover-command-demo>

Publish text on the hosts; select a provider during fallback setup.

<input id="tn-input" type="text" aria-labelledby="tn-label-host"
    aria-describedby="tn-description-host">
<rt-gallery-label id="tn-label-host" data-reference-target="text"
    data-label-text="Delivery preference">
  <template shadowrootmode="open" shadowrootreferencetarget="text">
    <strong id="text">Delivery preference</strong>
    <p>This extra component text is outside the selected name.</p>
  </template>
</rt-gallery-label>
<rt-gallery-description id="tn-description-host" data-reference-target="text"
    data-description-text="Tell us where the parcel should be left.">
  <template shadowrootmode="open" shadowrootreferencetarget="text">
    <p id="text">Tell us where the parcel should be left.</p>
  </template>
</rt-gallery-description>

// In the conditionally loaded setup module (package imports):
import { installReferenceTarget } from 'reference-target-fallback/core';
import { textNames } from 'reference-target-fallback/adapters/text-names';

const fallback = installReferenceTarget({
  adapters: [textNames({
    getText(host, kind) {
      return host.getAttribute(kind === 'label'
        ? 'data-label-text' : 'data-description-text');
    },
  })],
});
fallback.hydrate(document);

Keep data controls inside the form; install submit handlers before enabling the buttons.

<rt-profile-form id="profile-form" data-reference-target="inner-form">
  <template shadowrootmode="open" shadowrootreferencetarget="inner-form">
    <form id="inner-form">
      <label for="email">Email</label>
      <input id="email" type="email" name="email" required>
    </form>
  </template>
</rt-profile-form>
<button id="submit-profile" type="submit" form="profile-form"
    name="intent" value="submit" disabled>Submit</button>
<button id="save-draft" type="submit" form="profile-form"
    name="intent" value="draft" formnovalidate disabled>Save draft</button>
<button id="reset-profile" type="reset" form="profile-form" disabled>Reset</button>

const form = document.getElementById('profile-form')
  .shadowRoot.getElementById('inner-form');

form.addEventListener('submit', event => {
  event.preventDefault();
  // Read synchronously: a fallback submitter exists only during dispatch.
  const data = new FormData(form, event.submitter);
  submitProfile(data); // Application-owned validation and transport.
});
for (const id of ['submit-profile', 'save-draft', 'reset-profile']) {
  document.getElementById(id).disabled = false;
}