This part of the web components specification was the missing piece to create proper DOM encapsulation and composition. With shadow DOM, we can create isolated parts of the DOM that are protected against regular DOM operations from the outside. Also, CSS will not reach into shadow DOM automatically, and we can create local CSS within our component.
If you add a style tag inside shadow DOM, the styles are scoped to the root within the shadow DOM, and they will not leak outside. This enables a very strong encapsulation for CSS.
Content insertion points make it easy to control content from the outside of a shadow DOM component, and they provide some kind of an interface to pass in content.
At the time of writing this book, shadow ...
