demo · v133
A combobox with external label and error
External <label for> and external aria-errormessage both target an inner input inside a custom-element's shadow DOM — via the new shadowroot-reference-target mechanism. Pre-133 this was impossible without leaking the inner element.
input.labels:
—input.aria-errormessage:
—inner input id:
—the wiring
Before shadowrootreferencetarget, the only way to make <label for="x-combo"> focus the inner input was to break encapsulation: expose the inner id, or wire a focus handler on the host that forwarded into the shadow root. Both leak implementation details. shadowrootreferencetarget="email" on the shadow root declaratively says "when something points to me, treat it as pointing to my element with id='email'". Standards IDREF attributes (for, aria-labelledby, aria-errormessage, headers…) all follow the redirect.
this.attachShadow({
mode: "open",
shadowrootreferencetarget: "email",
});
this.shadowRoot.innerHTML = `<input id="email" type="email">`;