Next, we want to create the content to form our new shadow tree. Shadow DOM refers to a subtree of DOM elements that renders as part of the document, but not into the main document DOM tree. To recap, the Document Object Model is a representation of an HTML document. It is its own isolated DOM tree with its own elements and styles, completely isolated from the original DOM. To create one on the page, all we have to do is add the following element: That one element results in the following component: If we dig deeper, we will see that this one element is actually made up of several smaller
You can think of the shadow DOM as a “DOM within a DOM”. Here’s an example of of what that widget looks like: Assuming you have Javascript enabled and you inspect the element, you’ll notice that the button is an