Two composed web components: <ck-manual-editor-host> keeps the editor in a shadow
root of its own and is slotted into <ck-manual-slot-frame>, whose shadow tree wraps
its <slot> in a scrollable div.frame
(position: relative; overflow: auto; max-height: 300px).
Slotting does not move a node: it stays a child of the host in the node tree while rendering inside the
slot. Clipping, scrolling and positioning follow the flattened tree, so a walk over the
node tree leaves for <body> and skips div.frame – the element that
actually lays the editor out. Everything below is expected to pass in the open mode. In
the closed mode Element#assignedSlot is null, so the walk
falls back to the node tree and the checks fail. That is a known limitation, not a regression.
Sweep the overlay toggle too. On, the overlay layer (balloons, dialogs, tooltips) gets a
container of its own at the end of <body>. Off, it mounts inside the
editor component's own root, so it renders inside the frame and is positioned against
div.frame – and cannot escape the frame's clipping, so a balloon anchored at the
frame's edge is cut off by design.
Reach the editor as window.editor and the frame as
document.querySelector( 'ck-manual-slot-frame' ).frame, which stays reachable in the closed
mode, where host.shadowRoot is null.
Select a word near the frame's edge to open the balloon toolbar, then scroll the frame: the balloon has to follow the selection and disappear once it scrolls out of the frame.
The frame is overflow: auto with a max-height, so this content overflows
it and there is something to scroll. Everything from here down starts out of view.
| A1 | B1 | C1 |
| A2 | B2 | C2 |
| A3 | B3 | C3 |
A block quote to drag with the block toolbar handle.
Filler so the frame has more to scroll than the viewport does. Without it the window and the frame
would scroll by the same amount and a walk that found <body> instead of the frame
could still look correct by accident.
More filler. More filler. More filler. More filler. More filler. More filler. More filler. More filler. More filler. More filler. More filler. More filler.
The last paragraph – put the caret here, scroll the frame back to the top, then type: the frame has to bring the selection back into view.