Shadow DOM создаёт изолированное DOM-дерево внутри элемента. Стили внутри Shadow DOM не утекают наружу, и внешние стили не проникают внутрь. Создаётся через element.attachShadow({mode: 'open'}). Это настоящая инкапсуляция — в отличие от CSS Modules или BEM, где изоляция условная. Используется в Web Components и браузерных элементах — input type="date", video player скрывают сложную структуру за Shadow DOM. CSS-переменные могут пробить границу Shadow DOM.