What is ElementInternals?

• ElementInternals is a powerful web API allowing custom elements to participate more fully in browser features, especially accessibility.
• Contains internal element features like default ARIA states and roles, custom states, and custom validation
• Enables custom elements to behave like native elements in terms of accessibility and forms.

ARIA stands for Accessible Rich Internet Applications

Accessibility Features and Cross-Browser Support

• Most ARIA-related features are now supported in all major browsers via ElementInternals.
• However, some APIs (e.g., ariaLabelledByElements) are not yet fully cross-browser.
• Accessibility testing tools like axe-core may not always accurately flag issues due to these gaps, so manual testing is still recommended.

Practical Impact on Development

• Using ElementInternals improves accessibility defaults for custom elements, reducing manual ARIA management.
• Allows for more robust, accessible design systems built with Web Components.
• Example: Associating a custom input with <label> and forms, or managing ARIA attributes automatically.

The Challenge of Shadow DOM & ARIA References

• Shadow DOM encapsulation scopes element IDs, so references like aria-labelledby can break across shadow boundaries.
• Many ARIA attributes (aria-activedescendant, aria-controls, aria-labelledby) depend on referencing elements by ID.

Shadow DOM is the private, encapsulated portion of a web component, containing it's own HTML

Reference Target Proposal

• Reference Target is a proposed solution to allow ARIA references to work across shadow DOM boundaries.
• Would enable more accessible, composable components by allowing safe cross-root references.

<label for="fancy-input">Fancy input</label>
<fancy-input id="fancy-input">
  <template shadowrootmode="closed"
            shadowrootreferencetarget="real-input">
    <input id="real-input">
  </template>
</fancy-input>

Snippet by Westbrook Johnson

• WICG Proposal: Reference Target
• WebEngines Hackfest 2025

Current Workarounds & Future Impact

• Workarounds include flattening the DOM or duplicating elements for accessibility, but these are complex and brittle.
• Reference Target aims to simplify authoring and improve accessibility without sacrificing encapsulation.

What Are Declarative Custom Elements?

• Declarative custom elements allow you to define and instantiate custom elements purely in HTML, without imperative JavaScript.
• Enables features like HTML modules, CSS module scripts, and template-based DOM parts.

The Road Ahead

• These features are still experimental and not available in most browsers.
• Declarative custom elements will make it easier to share, reuse, and compose web components natively.

Related Technologies

• CSS module scripts: Import and use CSS directly in JS modules.
• HTML modules: Import HTML like JS or CSS modules, improving code organization.
• DOM Parts/Templating: Fine-grained templating APIs that boost performance and maintainability.
• See WPT Interop Issue #703

:host(:has())

• The :host(:has(...)) selector enables styling the host element based on its shadow content.
• Allows for dynamic styling based on the presence or state of children inside shadow DOM.

:host:has()

• The :host:has(...) selector enables styling the host element based on its light content.
• Allows for dynamic styling based on the presence or state of children outside shadow DOM.

Use Cases & Differences

• Example: Apply a border to a custom element only when a certain class is present within its shadow DOM.
• Not the same as :has-slotted(), which targets slotted, light DOM children.
• Brings new power to styling encapsulated components.
• See WPT Interop Issue #791

Why Scoped Registries?

• Scoped Custom Element Registries allow custom elements to be registered per shadow root, not globally.
• Solves the problem of name collisions and double registration when combining components from multiple sources.

Micro Frontends & Collaboration

• Ideal for micro-frontend architectures where multiple teams deliver components to the same page.
• Each team can use their own version of a component without conflicts.

Developer Experience

• Encourages collaboration and reuse without worrying about global registry pollution.
• Simplifies large-scale adoption of web components in enterprise applications.

Thanks

• Westbrook Johnson
• Web Components Community Group