Skip to content


JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler

# ally.event.shadowFocus

Observes focus changes within ShadowDOMs and emits shadow-focus CustomEvents.

# Usage

document.addEventListener('shadow-focus', function(event) {
  // event.detail.elements: complete focus ancestry (array of nodes)
  // the actually focused element within the ShadowDOM
  // event.detail.hosts: the shadow host ancestry of the active element
}, false);

// start emitting shadow-focus
var handle = ally.event.shadowFocus();
// stop emitting shadow-focus

# Returns

A <global-service> interface, providing the handle.disengage() method to stop the service.

# Event data

The event.detail property provides the following data:

Name Type Description HTMLElement The actually focused element within the ShadowDOM.
event.detail.elements array of HTMLElement The complete focus ancestry
event.detail.hosts array of HTMLElement The ShadowHost ancestry of the active element.

# Changes

# Contributing