Shadow DOM... Illustrated!
Â
What is DOM?
Browser generates Document object model from static html files in order to manipulate the structure, style and content.
Â
Shadow DOM
Shadow DOM enables encapsulation to keep the markup, style and behaviour hidden and private to the component that hosts it.
Â
Since it is private and hidden, global logic and styles cannot affect.
Â
Events
Events that are thrown from within a shadow DOM usually do not propagate outside the boundary unless it is set to
composed: true
Â