Reference Target: having your encapsulation and eating it too
a month ago
- #Accessibility
- #Web Components
- #Shadow DOM
- The blog post discusses the conflict between Shadow DOM encapsulation and accessibility, highlighting how encapsulation prevents elements inside a shadow root from being referenced by elements in the light DOM.
- A new feature called 'referenceTarget' is introduced, which allows a shadow root to nominate an element in its subtree as the target for any attribute-based reference to the shadow host, improving accessibility.
- The 'referenceTarget' property can be set programmatically on the ShadowRoot object or declaratively using the <template> element with the 'shadowRootReferenceTarget' attribute.
- Examples are provided showing how 'referenceTarget' can be used to make custom elements like <custom-input> and <custom-dialog> behave like their built-in counterparts for accessibility purposes.
- The post explains that 'referenceTarget' solves a specific problem by allowing custom elements to encapsulate built-in element behavior while still being referable by other elements, making the encapsulation an implementation detail.
- Adjacent problems like arbitrary cross-shadow root references and attribute forwarding are mentioned as areas that still need solutions, with links to related issues for further discussion.
- The spec changes for 'referenceTarget' are detailed, including the addition of an 'element reference' attribute type in HTML and the recursive resolution of reference targets.
- Implementation status is covered, with Chromium having the most complete implementation, and WebKit and Firefox having prototypes behind feature flags. Testing limitations and future projects to improve accessibility testing are also discussed.