CSS containment is a set of browser features allowing web developers to indicate that an element and its contents are, as much as possible, independent of the rest of the document.
For example, when setting
contain: paint; on an element, the browser then
knows for a fact that the element and its children don't intend to draw anything
outside of the element's
This allows the browser to skip a lot of calculations, which can result in a
significant performance boost.
The web component uses the
transform* CSS properties in order to zoom in on a
region. Although it also uses the
clip-path CSS property in order to clip what
is outside its box, the browser doesn't know by default that the web component
doesn't intend to draw at all outside its box and reserves space for it. This
causes an overflow and thus unwanted scrollbars.
To prevent this, the web component sets
contain: paint; on its parent element
by default. This may not be supported on older browsers and you can tweak this
behavior. See browser support and
attribute reference for more details.