1. Shadow DOM is what
What Shadow DOM that? Let's open the Chrome DevTool, and in 'Settings -> Preferences -> Elements' in the 'Show user agent shadow DOM' tick. Then, open a support HTML5 video playback website. For example, Youtube:
You can see video has an internal #shadow-root , you can still see under ShadowRoot div such common HTML tags. We know video there will be "Play / Pause button, progress bar, video time display, volume control," and other controls, and that in fact, is made in these sub-elements ShadowRoot constituted. The most commonly used input is actually attached Shadow DOM, for example, we give a try in Chrome