Shadow DOM is a web API that allows a hidden DOM sub-tree to be attached to a regular DOM tree, which can be attached to any elements in the DOM and treated and styled as regular DOM elements. Shadow DOM serves for encapsulation, allowing a component to have its very own “shadow” DOM tree that can’t be accidentally accessed from the main document, may have local style rules, and more. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. Shadow DOM is just normal DOM with two differences: how its created/used and how it behaves in relation to the rest of the page. Normally, you create DOM nodes and append them as children of another element. With shadow DOM, you create a scoped DOM tree thats attached to the element, but separate from its actual children. This scoped subtree is called a shadow tree. The element its attached to is its shadow host. Shadow DOM is a self-contained block of code within a regular DOM that has its scope. Its main task is to keep the elements styles and functionality encapsulated. That means that no styles will leak from the Shadow DOM sub-tree to the main DOM and no global styles will affect the elements of the Shadow DOM, even if some of them happen to have the same names.