Shadow DOM in Angular

Shadow DOM basically allows group of DOM implementation to be hidden inside a single element (which is the basic idea of components) and encapsulate styles to the element.
OR
Shadow DOM allows us to hide DOM logic behind other elements.

Shadow DOM tree starts with a shadow root,underneathwhich can be attached to any elements you want, in the same way as the normal DOM.

Shadow DOM terminology:
•Shadow host: The regular DOM node that the shadow DOM is attached to.
•Shadow tree: The DOM tree inside the shadow DOM.
•Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
•Shadow root: The root node of the shadow tree.

Real Example:
example of a "video" element,All you see in the DOM is the "video" element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.

You can attach a shadow root to any element using the Element.attachShadow() method. This takes as its parameter an options value of open or closed.

let s = element.attachShadow({mode: 'open'}); - you can access SD
let s = element.attachShadow({mode: 'closed'}); -you can't access SD

Comments

[Manuel Graf]

How has this anything to do with Angular? this is basically copy pasta from MDN. I'd really like to have som guidance on a complete shadow DOM implementation of an Angular component!