DEV Community

Cover image for Shadow DOM... Illustrated
Rajasneha
Rajasneha

Posted on

Shadow DOM... Illustrated

What is DOM

Browser generates Document object model from static html files in order to manipulate the structure, style and content.

Image description


Enter Shadow DOM

Shadow DOM enables encapsulation to keep the markup, style and behaviour hidden and private to the component that hosts it.

Image description


Image description


Events

Events that are thrown from within a shadow DOM usually do not propagate outside the boundary unless it is set to composed: true

Image description


If you like this content please follow on twitter for more of these - https://twitter.com/Rajasneha_dev

Discussion (0)