The Anatomy of a Web Component: Shadow DOM
The shadow DOM is an encapsulation mechanism that isolates the markup of a web component from the rest of the document. As a result, it offers a way for developers to author components that are safe to distribute and consume on third-party pages.
Even though the shadow DOM is a single feature, there’s a lot of similar sounding terminology that we should be familiar with before continuing. Here’s a handy glossary of all the terms we’ll be using:
Light DOM - This term only exists within the context of web components, to contrast with the shadow DOM. All of the markup you write that exists outside of a shadow DOM, lives in the light DOM.
Shadow host - This is an element in the light DOM that renders a web component. This is the element that the shadow root attaches to. In the copyright above example, the <odyssey-copyright> element is the shadow host.
Shadow root - This is the root node of the shadow DOM. It’s attached to the shadow host and is encapsulated wit