Reference target
Limited availability
The referenceTarget property of a ShadowRoot object forwards attributes such as for and aria-labelledby to elements inside a shadow DOM. You can use this to, for example, link a <label> to its <input> even if the <input> is in the shadow DOM of a web component.
Browser support
Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.
MDN documentation
Usage (according to Chrome Platform Status)
~0.009% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper use cases
-
I want to support more accessible web components in our SSR library. The JS code that people use to emulate reference target like behavior isn't not something we can support on the server without a DOM.
I want to support more accessible web components in our SSR library. The JS code that people use to emulate reference target like behavior isn't not something we can support on the server without a DOM. [see original comment] -
At Red Hat, we maintain a web-components design system. We need to run cross root aria for cases like this: ``` <rh-select> <rh-option>...</rh-option> ``` In which case rh-select's shadow root has a combobox input, button, and listbox.
At Red Hat, we maintain a web-components design system. We need to run cross root aria for cases like this: ``` <rh-select> <rh-option>...</rh-option> ``` In which case rh-select's shadow root has a combobox input, button, and listbox. [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist