🔗ally.event.shadowFocus

Observes focus changes within Shadow DOMs and emits shadow-focus CustomEvents.

🔗Usage

document.addEventListener('shadow-focus', function(event) {
  // event.detail.elements: complete focus ancestry (array of nodes)
  // event.detail.active: the actually focused element within the Shadow DOM
  // 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
handle.disengage();

🔗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
event.detail.active	`HTMLElement`	The actually focused element within the Shadow DOM.
event.detail.elements	array of `HTMLElement`	The complete focus ancestry
event.detail.hosts	array of `HTMLElement`	The ShadowHost ancestry of the active element.

🔗Related resources

ally.get.activeElements is used to identify the parent ShadowHosts
Focus Observer is an alternative implementation of this module

🔗Contributing

module source
document source
unit test
this module does not use ally/prototype/window.customevent.js for Internet Explorer compatibility because IE does not support Shadow DOM