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".
• 
• 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