# utils/dom/getoverlaymountroot

module

<a id="functions">

## Functions

<a id="function-getOverlayMountRoot">

### `getOverlayMountRoot( containerNode ) → ShadowRoot | HTMLElement | null`

Returns the DOM tree that a feature's floating UI – its balloons, dialogs and tooltips – should be put in: the same one the feature itself is in.

Floating UI would otherwise go into `document.body`. That is outside the shadow root an editor may live in, so the UI would leave the tree the editor's styles were loaded into, and lose them.

Being in the same tree means one of three things:

* the shadow root the given element is in, if it is in one. A shadow root passed in returns itself.
* the `<body>` of that element's own document otherwise, so an editor in an iframe stays in that iframe.
* `null` while the element is detached, because there is no telling yet which tree it will end up in. Put the UI nowhere for now and ask again once the element is in the DOM.

Feed the result to [`syncMountTarget`](module_ui_editorui_bodycollection-BodyCollection.md#function-syncMountTarget), and call this again whenever the element may have moved. Works with open and closed shadow roots.

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

#### Parameters

* `containerNode: Element | ShadowRoot`

  The element the floating UI belongs to – usually the feature's container.

#### Returns

* `ShadowRoot | HTMLElement | null`

---

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