Shadow DOM
In plain terms
An encapsulation mechanism that isolates a component's DOM and styles.
Going deeper
Shadow DOM attaches a hidden, scoped DOM subtree to an element so its markup and CSS don't leak in or out. It enables true component isolation.
Under the hood
Styles and IDs are scoped, preventing global CSS collisions; the backbone of Web Components encapsulation.
Examples
Web Components, custom elements, encapsulated widgets, <video> internals.
Think of it like...
Like a soundproof room: what happens inside doesn't affect the rest of the house.