What is the Shadow DOM and what problem does it solve?

The Shadow DOM is a web standard that encapsulates a component's internal DOM structure and styles, hiding them from the main document. Styles inside a Shadow DOM do not leak out and external styles do not bleed in — providing true style encapsulation. This solves the global CSS namespace problem: a component's .button class is scoped only to that component's shadow tree. Shadow DOM is the foundation of Web Components (custom elements). Native browser elements like <video>, <input type="range">, and <select> use Shadow DOM internally to render their complex internal structure. It can be attached via JavaScript: element.attachShadow({ mode: "open" }).