Shadow roots - where components put their internal DOM - create CSS scopes with both upper and lower bounds. This gives both encapsulation and perf benefits. 1

Shadow roots - where components put their internal DOM - create CSS scopes with both upper and lower bounds. This gives both encapsulation and perf benefits. 1) You don't have to worry about selectors for your component internals accidentally matching somewhere else in the document. As a result you can write simple selectors, often just tagname or id selectors, and have much smaller stylesheets. It's just a lot easier to read and reason about. 2) Perf is better, partially because of smaller style sheets and simpler selectors, but also because there's much, much less tree invalidation when DOM changes because you only invalidate inside the scope of the change. There's also huge parsing benefits because browsers deduplicate <style> tags that have identical text, so if you put the same style in many shadow roots, it's only parsed once, and one stylesheet object among all the roots.