# utils/dom/shadowrootregistry

module

<a id="classes">

## Classes

<a id="class-ShadowRootRegistry">

### [ShadowRootRegistry](module_utils_dom_shadowrootregistry-ShadowRootRegistry.md)

<a id="type-definitions">

## Type Definitions

<a id="typedef-ShadowRootRegistryAddEvent">

### `ShadowRootRegistryAddEvent`

<a id="typedef-ShadowRootRegistryRemoveEvent">

### `ShadowRootRegistryRemoveEvent`

<a id="functions">

## Functions

<a id="function-listenToShadowRoots">

### `listenToShadowRoots( registry, options = { options.callback, options.emitter, options.event, options.listenerOptions? } ) → () => void`

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:

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

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/shadowrootregistry.ts#L166)

#### 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`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)