shadow-focus.md

layout	tags
doc-api.html	internal, shadow-dom, global-service

ally.event.shadowFocus

Observes focus changes within Shadow DOMs 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 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();

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 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.

Examples

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 Shadow DOM