UiConfig

The element or shadow root that hosts the editor's overlay layer.

The overlay layer (internally the body collection) hosts the editor's floating UI – balloons, dialogs, and tooltips. It is rendered outside the editor's own DOM structure so it stacks above the editor and is not clipped by scrollable or overflow: hidden ancestors.

When the editor runs inside a shadow root, provide this container as a separate shadow root attached to a host element placed at the end of document.body, rather than to an element nested in the editor's own tree. As a direct child of document.body, that host has no scrollable or overflow: hidden ancestor to clip the overlay layer, and its own shadow root keeps it a self-contained styling boundary:

const overlayHost = document.body.appendChild( document.createElement( 'div' ) );
const overlayContainer = overlayHost.attachShadow( { mode: 'open' } );

// A shadow root does not inherit the page styles, so the editor stylesheets must be adopted into it
// (for example through its `adoptedStyleSheets`) for the overlay layer to render styled.
overlayContainer.adoptedStyleSheets = editorStyleSheets;

ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		ui: {
			overlayContainer
		}
	} );

When it is not set, the editor falls back to auto-detecting the shadow root it lives in (open or closed). Treat this only as a fallback – that root may clip the overlay layer; the document.body default is meant just for editors embedded in the light DOM.

The configuration of the “Powered by CKEditor” logo.

Read more in PoweredByConfig.

The viewport offset used for positioning various absolutely positioned UI elements.

Read more in ViewportOffsetConfig.