Important: The editing surface renders into the light DOM
Description
The editing surface used to be drawn inside a shadow root. It now renders into the page like ordinary markup.
This was done so that a site can style the surface with its own rules: no
selector crosses a shadow boundary, so a theme's
.button
could never
reach a button the surface drew, and the only styling interface was a CSS custom
property. That interface still exists and is unchanged.
Impact
A site's stylesheet now applies to the surface. This is the point of the
change, and it cuts both ways: rules written for the rest of the site reach the
surface whether or not that was intended. Every element the surface draws carries
a class prefixed
frontend-, which is what a rule should be written
against.
The stylesheet is no longer optional. The appearance used to ship inside the
component, so a page that failed to load
frontend- still rendered a coherent surface. It does not any
more. The file is emitted by the plugin's own template, so this only matters for
a template that renders the plugin without its assets.
See also