ally.event.shadowFocus

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

Description

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 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
handle.disengage();

Arguments

Returns

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

Throws

Event data

The event.detail property provides the following data:

Name	Type	Description
event.detail.active	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.

Examples

Changes

• Since v1.1.1 the module does not access document.body at load time anymore.

Notes

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 ShadowDOM