Shadow DOM Accessibility: Custom Web Components, Cross-Root ARIA & Focus

Web Components (Custom Elements + Shadow DOM) offer powerful style encapsulation. However, the Shadow DOM boundary creates severe accessibility hurdles: standard ARIA attributes relying on element IDs (`aria-labelledby="id"`, `aria-describedby="id"`) cannot cross the shadow root boundary, breaking screen reader connections unless engineered with modern Cross-Root ARIA and Form-Associated APIs.

The Shadow DOM Encapsulation Trap

If a custom `<custom-input>` lives inside a Shadow DOM, an external `<label for="input-id">` in the light DOM cannot reach into the shadow root to link the input, leaving the field unlabelled in the accessibility tree.

Focus Management with `delegatesFocus: true`

When attaching a shadow root, configure `delegatesFocus: true` so that when keyboard focus hits the host custom element, focus is automatically delegated to the first focusable internal node:

class AccessibleButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open', delegatesFocus: true });
    this.shadowRoot.innerHTML = `
      <button type="button" class="btn">
        <slot></slot>
      </button>
    `;
  }
}
customElements.define('accessible-button', AccessibleButton);

Form-Associated Custom Elements (FACE API)

Use `static formAssociated = true;` and `ElementInternals` to participate in native form validation and submit cycles.