← All demos

Shadow role — shadow DOM label & description

The ARIA role lives on an inner shadow DOM element, not the custom element host. Each component contains a <span id="label"> and <span id="description"> in its shadow DOM, with named slots (slot="label" and slot="description") so consumers can provide custom text. The role element is wired with aria-labelledby="label" and aria-describedby="description" — same shadow root, so ID references work reliably.

The combobox uses Element.ariaActiveDescendantElement to associate the active option (a slotted light DOM element) with the shadow combobox trigger, crossing the shadow boundary via the element reference API.

Textfield

Email address We'll never share your email.

Checkbox

Subscribe to newsletter You can unsubscribe at any time.

Progress bar

Upload progress Uploading your files to the server.

Combobox

Favorite fruit Arrow keys navigate, Enter or Space selects.
  • Apple
  • Banana
  • Cherry
  • Date
  • Elderberry