demo · v133

Reference Target

A custom element <fancy-input> wraps a real <input> inside its shadow root and declares reference-target. The light-DOM <label for="..."> now correctly points at the inner input across the shadow boundary - click the label to focus.

Behind a flag in Chrome 133. Enable chrome://flags/#enable-experimental-web-platform-features if the support line below says no. Without it the label still labels the host but won't traverse the shadow boundary.
document.activeElement.tagName
-
labels[0].textContent
-

checking support...

the code

class FancyInput extends HTMLElement {
  constructor() {
    super();
    const sr = this.attachShadow({ mode: "open", referenceTarget: "real" });
    sr.innerHTML = `<input id="real" type="email">`;
  }
}
customElements.define("fancy-input", FancyInput);
// <label for="email">...</label><fancy-input id="email"></fancy-input>

see also