This content originally appeared on Go Make Things and was authored by Go Make Things
In my video on building a modern web app with vanilla Web Components, I mentioned that I believe the Shadow DOM is an antipattern when using Web Components.
I had a few folks in the comments ask me why.
After all, the Shadow DOM is touted as one of the premiere features of working with Web Component. And certain features, like slots, require the Shadow DOM to work.
I’ve built a lot of Web Components over the last couple of years, and in my experience, the Shadow DOM creates more problems than it fixes.
Let’s first talk about the Shadow DOM’s benefits…
- It encapsulates your code form the main DOM. This means JavaScript and CSS elsewhere on the page will not interfere with or break.
- It lets you use the
<slot>element for templating and customization.
Now let’s talk about the disadvantages…
- It prevents your global CSS from cascading into your Web Component HTML. This makes consistent styling significantly harder and more verbose.
- It (currently) requires you to generate your HTML with JavaScript. Declarative Shadow DOM is a newer feature that will fix this once better supported.
- The encapsulation it provides also makes extending and customizing the code harder unless you build in lots of developer hooks.
- It can create accessibility issues.
And those benefits? You can achieve “good enough” version of them without the Shadow DOM.
The custom elements you use to create your Web Component provide a styling hook that can scope your styles to just the Web Component.
accordion-group button {
/* Button styles just for this component */
}This let’s you take advantage of the cascade and write significantly less CSS.
But what about external styles colliding with your component? Frankly, that sounds like an issue with how the global stylesheet is designed.
Throwing more JS at the problem instead of writing better CSS isn’t the happy path forward.
And while the <slot> element is really cool and I wish you could use it without the Shadow DOM, you absolutely can do the same thing without it.
It does require you to use the querySelector() method to grab elements, but it’s not anymore work than coding all of your HTML in JavaScript was in the first place.
So yea… I think the Shadow DOM is an antipattern that makes Web Components measurably worse in nearly all circumstances. I’m sure it has some edge-case uses, but it would be a measure of last resort for me, not a starting point.
☀️🧠 Summer of Learning Sale! Join the Lean Web Club today and get 1 month free, plus 30% off for the first three months after that. Click here to join for free now!
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-06-27T14:30:00+00:00) The Shadow DOM is an antipattern. Retrieved from https://www.scien.cx/2024/06/27/the-shadow-dom-is-an-antipattern/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.