What is shadow DOM?

 What is DOM ?

DOM - Document Object Model is a programming API for HTML or XML component, It defines logical structure of documents and the way document is accessed and manipulated. Basically the DOM is tree structure representation of web page.

What is Shadow DOM ?

Shadow DOM brings encapsulation concept to DOM. It enables to link hidden separate DOM to an element.

Benefits: DOM query, CCS rules and event propagation does not cross shadow boundary, hence creating encapsulation.

Basically when we try fetch all the DOM using query selectors, we will not get DOM elements for child component in parent component.

When we apply style sheet to DOM of parent component, there will be no impact to child component DOM.

Event propagation will not work from child to parent or vice versa by default. 

How to attach shadow DOM to element ?

<script>

    const element = docuement.queryselector('#elementId');

    const shadowRoot = element.attachShadow({mode:'open'});

    shadowRoot.innerHTML = '<p>I am a shadow DOM</p>'

</script>