<audio controls><source src=”horse.mp3″ type=”audio/mpeg”></audio>
If you observe the code, we do not see any speaker or play related functionality. All the details are encapsulated inside a single tag <audio controls> which was implemented using Shadow DOM. When we inspect the page we do not see the details other than audio controls related functionality.
If we enable “Show user agent shadow DOM” then we would be able to see the implementation details. After enabling the setting we are able to buttons/time control under the shadow content.
Structure of shadow DOM:
An element that has a shadow root associated with it is called “shadow host”. The shadow root can be treated as an ordinary DOM element so that we can append arbitrary nodes to it.
With Shadow DOM, all markup and CSS are scoped to the host element. In other words, CSS styles defined inside a Shadow Root won’t affect its parent document, CSS styles defined outside the Shadow Root won’t affect the main page.