258
shadow DOM
also shadow root, web component
A shadow root keeps page CSS out and component CSS in. The global sheet does not cross it.
What is shadow DOM?
A shadow root is a DOM subtree with its own markup and style. Page selectors do not match inside it. Inherited properties still inherit. ::part and CSS variables are the deliberate exits. Events are retargeted when they leave the root. A closed root hides the nodes from the page script. It does not add security.
Why does shadow DOM matter when vibe coding?
The draft attaches a design-system stylesheet and expects it to style a web component. The insides stay unstyled. The next attempt pierces the shadow with a deep selector the browser no longer allows.
How do you do shadow DOM?
Style the shadow from the inside, or expose parts and variables. Do not query shadow nodes from the page. Use light DOM if you need the page sheet.
How do you ask a model for shadow DOM?
Style (component) inside its shadow root. Expose (parts) and CSS variables for theming. Do not rely on the page stylesheet. Do not use a piercing selector.
What goes wrong with shadow DOM?
A closed shadow root “for security.” The page still hosts the component. Closed only blocks your own debugging.