shadow DOM

Definitions

1. A web standard that creates an encapsulated DOM tree attached to an element, isolating its internal structure, styles, and behavior from the rest of the page. Shadow DOM is the key enabling technology for web components, preventing style leakage in both directions. It's how the browser implements native elements like <video> and <input type='date'>.

   In plain English: A way to create an isolated section of a web page where styles and scripts can't leak in or out — like a sealed room inside a house.

   Example: The design system uses shadow DOM to guarantee component styles are completely isolated — no more CSS from the parent app breaking our buttons.

Related Terms

• iframe
• Semantic HTML
• web component