Как работает Shadow DOM?

Shadow DOM — механизм инкапсуляции, который создаёт изолированное DOM-дерево внутри элемента. Стили и скрипты внутри shadow DOM не просачиваются наружу, а внешние стили не влияют на содержимое тени. Это основа веб-компонентов: каждый компонент несёт свои стили и разметку, которые не конфликтуют с остальной страницей. Браузеры сами используют Shadow DOM для элементов вроде <video> и <input type="range">.