Reference target
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.
Status
Limited availability
MDN documentation
Browser support
- Chrome ❌ See issues.chromium.org/issues/346835896
- Chrome Android ❌
- Edge ❌
- Firefox ❌
- Firefox for Android ❌
- Safari ❌
- Safari on iOS ❌
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 votes
Do you need this feature?
Let us know by leaving a 👍 reaction on the feedback issue. Don't forget to also leave a comment explaining your specific use case.
Developer 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