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