Shadow DOM

Shadow DOM: Introduction

New DOM feature that helps you build components. Shadow DOM is one of the four Web Component standards: HTML Templates, Shadow DOM, Custom elements and HTML Imports. Shadow DOM is set of DOM elements managed by your element. Can think of shadow DOM as scoped subtree inside your element. According to google web fundamentals: "Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup".

Shadow Dom (image/png)

Caption: : Representation of Shadow DOM

Shadow DOM: Bit more details

Shadow Root: It is top of the shadow tree. Shadow Host: The element to which the tree is attached to. ShadowRoot: The host has a property called shadowRoot that refers to shadow root. Host: The shadow root has a host property that identifies host element. The shadow tree is separate from the element's children. You can think of this shadow tree as part of the component's implementation, which outside elements don't need to know about. The element's children are part of its public interface.

• Diagram-Architecture of Shadow DOM