`MultiRootEditor` leaves placement of the toolbar, the menu bar and every editable entirely to the integrator. This test places all of them itself and puts each root in its own shadow root, so adding and detaching roots at runtime makes shadow roots appear and disappear while the editor is alive. The toolbar and the menu bar are pushed two more shadow levels deep on top of that. The body-collection wrapper (balloons, dropdown panels) sits in its own, separate shadow root.
Use Add root / Detach last root to exercise code that has to keep up with shadow roots coming and going, rather than resolving them once at startup — tooltips, the block toolbar and the balloon toolbar all attach listeners per shadow root.
The editor stylesheet is forwarded into every shadow root involved verbatim and disabled in the main
document – the theme declares its custom properties on :root, :host, so they resolve
inside each shadow root.
In the light DOM there is nothing to nest, so every root is placed directly and the rest of the test behaves the same – which makes that mode a fair comparison rather than a different code path.
—