What is a Shadow DOM?

Without encapsulation, any script injected into a page shares one global CSS namespace. A site rule like a wildcard box-sizing reset or a broad button style leaks into the embedded component, and the component's own CSS can just as easily leak out and break the host site. Developers historically worked around this with iframes or defensive class prefixing, both of which have real costs.

Attaching a shadow root solves it at the platform level. CSS defined inside applies only inside, page selectors cannot reach in, and only explicitly inherited properties and CSS custom properties cross the boundary, which makes controlled theming possible without giving up isolation.

This is why Clerkzo renders its chat widget inside a Shadow DOM. A single script tag can be dropped onto any site, however its CSS is written, and the widget will look the way it should without altering the page around it.