Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. (You can only see it when rendering)
Shadow DOM encapsulates DOM and CSS in a web component, for example, <input type=”range”>, separating itself from the DOM of the main document, and hiding the implementation details.
Examples using shadow DOM:
- video HTML element – it has trigger button, timelines, volume control hidden behind the DOM.
Shadow DOM must always be attached to an existing element. The element can be either a literal element in an HTML file, or an element created in the DOM by scripting, it can be a native element like <div>, or a custom element like <my-element>.
Outside CSS style cannot reach into the shadow DOM, and vice-versa. However, you can use predefined psuedo attribute to style the shadow DOM subtrees. The builder of the shaodow DOM subtree gets decide which specific parts of their tree can be styled.
Events fired inside of a shadow DOM are re-targeted to avoid exposing things inside of the shadow subtree. For example, a click event is fired by the mute button inside of <audio controls src=”test.wave”></audio>, the event.target will be audio, not the mute button.
If you attach a child element to an element with a shadow DOM subtree, looking at them from the DOM, the child element is there. However, the child element will be hidden (teleported into shadow tree hole) and shadow DOM subtree will be shown when rendering in the browser.