Ever wondered how the HTML video tag has buttons to control the video, styled by default and doesn't need to be explicitly declared?
Shadow DOM lets you encapsulate inner child nodes of your custom HTML component providing a way to attach a hidden separated DOM to that element.
Read more : https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Using shadow DOM - Web Components | MDN
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.
