Shadow DOM is basically a sub-tree of DOM elements, which is included during rendering of the document but not included in the main document DOM. In other words, the content of a Shadow DOM is a different document, which is merged with the main document to create the overall rendered output.
Take an example of slider:
<input id="foo" type="range">
Now, to enable Shadow Root you need to:
- inspect element
- click on the gear icon in the top right corner
- Go to Elements
Show user agent shadow DOM
You can override the default styles and tweak some beautiful features!
You could try it for
<video> HTML5 tags.
This is the link, I referred to understand.