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
- Chrome 152 Released on 2026-08-25
- Chrome Android 152 Released on 2026-08-25
- Edge 152 Released on 2026-08-28
- Firefox Not supported Bugs: 1952585
- Firefox for Android Not supported
- Safari Not supported
- Safari on iOS Not supported
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)
~21.678% 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