What is Shadow DOM?
A browser feature that isolates a component's HTML and CSS from the rest of the page.
Why It Matters
Shadow DOM prevents a component's styles from leaking out or being affected by external styles.
Real-World Example
A custom video player component with its own styles that are not affected by the page's global CSS.
“Understanding terms like Shadow DOM matters because it helps you have better conversations with developers and make smarter decisions about your software. You do not need to be technical. You just need to know enough to ask the right questions.”
Related Terms
Web Components
A set of browser standards that let you create reusable custom HTML elements with encapsulated behaviour.
Virtual DOM
A lightweight copy of the page that React uses to figure out what needs to change
Component
A reusable building block of a user interface that can be combined to create complex pages
Learn More at buildDay Melbourne
Want to understand these concepts hands-on? Join our one-day workshop and build a real web application from scratch.
Related Terms
Component
A reusable building block of a user interface that can be combined to create complex pages
Virtual DOM
A lightweight copy of the page that React uses to figure out what needs to change
Web Components
A set of browser standards that let you create reusable custom HTML elements with encapsulated behaviour.
Frontend
The part of a website or app that users see and interact with directly
React
A popular tool for building user interfaces, created by Facebook, that makes complex UIs easier to manage
Next.js
A framework built on React that adds features like page routing, server-side rendering, and API handling