← All demos

Shadow role — referenceTarget labelling

Each component sets shadowRoot.referenceTarget = 'role' so that aria-labelledby and aria-describedby attributes on the host element resolve directly to the inner shadow element with id="role". No LabellingController, no ariaLabelledByElements JS wiring — the browser handles cross-root IDREF resolution natively.

Compare with the hybrid demo, which achieves the same result today using ariaLabelledByElements and the LabellingController.

⚠️ referenceTarget is flag-gated in all browsers — click to see how to enable it

Chrome / Edge 133+

  1. Open chrome://flags
  2. Search for Experimental Web Platform Features
  3. Set to Enabled
  4. Click Relaunch

Firefox 144+

  1. Open about:config
  2. Search for dom.shadowdom.referenceTarget.enabled
  3. Set to true
  4. Restart Firefox

Safari 26+

  1. Open Safari → Develop menu
  2. Select Feature Flags…
  3. Find and enable referenceTarget
  4. Reload the page

Textfield

We’ll never share your email.

Note: <label for="tf"> click-to-focus does not work — referenceTarget resolves IDREF attributes but does not wire the for / labels association. A future label behavior would close this gap.

Checkbox

Subscribe to newsletter

You can unsubscribe at any time.

Progress bar

Upload progress

Uploading your files to the server.

Combobox

Favorite fruit
  • Apple
  • Banana
  • Cherry
  • Date
  • Elderberry
    •

    Arrow keys navigate, Enter or Space selects.

    referenceTarget resolves external aria-labelledby to the inner combobox trigger. The active option (a light DOM element referenced from a shadow element) still requires ariaActiveDescendantElement — that cross-root direction is not addressed by referenceTarget.