v152 · dom · accessibility
Label Crossing Shadow Boundary
The referenceTarget option on attachShadow() (or the shadowrootreferencetarget template attribute) lets an external <label for> point at an element inside a shadow DOM — eliminating the need for JS glue to forward focus.
Feature detection pending…
How it will work
When referenceTarget ships, a custom element can declare which inner element external labels should target:
this.attachShadow({
mode: "open",
referenceTarget: "inner-input"
});
// External label targets the HOST's id;
// referenceTarget forwards it to the inner element:
<label for="host-input">Name</label>
<custom-input id="host-input"></custom-input>
Without referenceTarget, the <label for> cannot reach the shadow input — the shadow boundary blocks it.