Shadow DOM: Encapsulating Styles and Structure
Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's `<video>` player, its internal controls are isolated, preventing your site's CSS from breaking them.
Shadow DOM provides true encapsulation by attaching a hidden, private DOM tree to an element. This "shadow tree" has its own structure and styles, walled off from the main document's DOM and CSS. It's the foundation for robust custom elements, like a browser's native `<video>` element—its play button and volume slider are implemented in a shadow DOM, which is why your global `button` styles don't affect them. The footgun: assuming you can easily style the component from the outside.
Read the original → developer.mozilla.org
- #web components
- #dom
- #css
- #encapsulation
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.