Reference Target API

[Westbrook]

Description

The Reference Target API allows forwarding attribute based content association across shadow DOM boundaries, a la:

<label for="fancy-input">Fancy input</label>
<fancy-input id="fancy-input">
  <template
    shadowrootmode="closed"
    shadowrootreferencetarget="real-input"
  >
    <input id="real-input">
  </template>
</fancy-input>

Or

<x-anchor id="x-anchor-1">
  <template shadowrootmode="open" shadowrootreferencetarget="anchor">
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      #anchor {
        background-color: yellow;
      }
    </style>
    <div></div>
    <div id="anchor"></div>
  </template>
</x-anchor>
<div id="popover-1" popover anchor="x-anchor-1">Popover content</div>

Currently this feature is in Chrome Canary behind a flag and there was wide interest in bringing this to the web platform at various TPAC sessions in September.

Specification

https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md

Additional Signals

WPTs

[wpt-interop]

Thank you for proposing Reference Target API for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.