A shadow root creates a boundary. Styles defined inside do not escape, and styles defined outside do not reach in. Element IDs inside it do not collide with the host page.

For any script embedded on sites you do not control, this is the difference between working reliably and being a support burden. Without it, a customer's global `button { }` rule or an aggressive CSS reset can silently break your interface on their site only.

It is not a security boundary — the host page can still reach an open shadow root through JavaScript. It is a robustness boundary, which is the problem an embedded widget actually has.

Why it matters

It is the reason an embedded widget can look identical on ten thousand sites with ten thousand different stylesheets.