Editor in the light DOM, an open Shadow DOM or a closed one

The editor is built in the root picked below. In the shadow modes the editor stylesheet is forwarded into the shadow root verbatim and disabled in the main document, so the editor is styled only via the shadow-adopted sheets – the theme declares its custom properties on :root, :host, so they resolve inside the shadow root with no rewrite. A closed root only hides host.shadowRoot from outside code; the editor still resolves its own root through getRootNode(), so both shadow modes should behave identically.

Hover toolbar buttons (tooltips), open the heading/font dropdowns, select text (balloon toolbar), use the block toolbar handle, open a dialog (e.g. find & replace) and the font color picker – all floating UI should appear inside the selected root and be styled.

With Overlay layer in its own container off, the body collection (balloons, dropdowns, dialogs) mounts inside the editor's own root automatically. Turning it on points config.ui.overlayContainer at a separate container at the end of <body> instead – a shadow root of the selected mode, or a plain element in the light DOM – proving the overlay layer is decoupled from the editor.

A closed root cannot be resolved through host.shadowRoot, so reach it from the console through the editor: editor.editing.view.getDomRoot().getRootNode().