utils/dom/shadowrootregistry

Some DOM events never reach a listener on document if they originate inside a shadow root — scroll and mouseenter/mouseleave, for instance, do not cross a shadow boundary at all. This function is how code that needs those events anyway reacts to them for every shadow root a registry is currently tracking: it attaches emitter's callback directly to each one tracked by registry, and keeps that up to date — attaching to roots that appear later, detaching from roots that disappear — for as long as the returned function is not called.

Attach it alongside the document listener rather than instead of it — one covers the light DOM, the other each shadow root:

view.listenTo( global.document, 'scroll', repositionOnScroll, { useCapture: true } );

const stopListening = listenToShadowRoots( editor.ui.shadowRootRegistry, {
	emitter: view,
	event: 'scroll',
	callback: repositionOnScroll,
	listenerOptions: { useCapture: true }
} );

The useCapture above is not incidental. The events this function exists for do not bubble when fired on an element, so a listener on a shadow root only sees one that originates inside that root during the capture phase. Without it the listener is attached but never fires.

Call the returned function to detach.

Parameters

registry: ShadowRootRegistry

The registry whose shadow roots should be listened to.

options: object

Describes the listener to attach to each shadow root.

Properties

options.callback: ( evt: EventInfo, domEvent: any ) => void

The event handler.

options.emitter: DomEmitter

The emitter to which this behavior should be added.

options.event: keyof DomEventMap

The DOM event to listen to.

options.listenerOptions?: CallbackOptions & object

Listener options, passed through to DomEmitter#listenTo().

Returns

() => void