This content originally appeared on Go Make Things and was authored by Go Make Things
In last week’s article about my web component boilerplate, I wrote…
[The shadow DOM] an anti-pattern that makes everything about using web components worse. Death to the shadow DOM!
The “benefit” of the shadow DOM is that it encapsulates your HTML, rendering it in its own DOM where it’s unaffected by the CSS and JavaScript on the page where it’s loaded.
The idea that this is a general benefit is a result of React-thinking and anti-CSS tendencies among the modern frontend community.
Because what it means in reality is that you cannot load a global stylesheet and let your web component inherit those styles. Your CSS must be loaded into the shadow DOM. Any global styles you want need to be replicated in the component stylesheet.
You lose out on the many wonderful benefits of the cascade (the C in CSS).
It’s so much more work for so little benefit. No. Scratch that. It’s not “little benefit.” It’s a net negative. It’s a worse developer experience… if you know how to craft CSS.
A common rebuttal I get to this…
What about when you want to keep global styles out of your component, like with a third-party widget that gets loaded on lots of different pages?
I kind-of sort-of see the logic in that. But I also think wanting your component to not look like a cohesive part of the page its loaded into is weird and unexpected.
In 2025, Cascade Layers can solve a lot of these problems more elegantly, and give developers using third-party systems control of when and how their CSS and third-party components interact.
Death to the shadow DOM! Long live the Cascade!
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-12-22T14:30:00+00:00) Death to the shadow DOM!. Retrieved from https://www.scien.cx/2025/12/22/death-to-the-shadow-dom/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.