Shadow DOM

The Shadow DOM is a browser feature that attaches a separate, hidden DOM tree to an element. Styles and scripts inside that tree stay isolated from the rest of the page, so outside CSS cannot change it and its own CSS cannot leak out.

It is the isolation layer behind web components. A widget with a Shadow DOM keeps its own look even if the host page defines a global style for the same tag. Content from the page can still appear inside through a slot. Declarative Shadow DOM lets you write this structure directly in HTML with a shadowrootmode attribute, so it renders without waiting for JavaScript.