Shadow DOM - jellyfish-tom/TIL GitHub Wiki

[SOURCES]

• https://developers.google.com/web/fundamentals/web-components/shadowdom

Part of the Web Components spec as proposed by W3C, which basically allows the encapsulation of smaller DOM elements and CSS styles into a single DOM element.

Shadow DOM fixes CSS and DOM.

Example Shadow DOM Element:

<video width="300" height="150"/>

However, actually encapsulates the following elements:

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

So by using Shadow DOM, we're able to hide the implementation details of our web element, and only pass along necessary information to the sub-elements (i.e. height, width), which, perhaps confusingly, strongly resembles the ReactJS idiom of passing props to components.

It does it all without tools or naming conventions. You can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla (pure) JavaScript.