DEV Community


Discussion on: Why I don't use web components

nopatternaaron profile image
aaron hans

This is a good article and I love your work on svelte and with the NY Times.

I got interested in Web Components when working at a large company maintaining several web applications built with different frameworks. It was fun to be able to create separate, lightweight components that could upgrade pieces of different applications without taking on the responsibility of rewriting too much at a time. When we used Web Components we skipped the shadow DOM because of some issues with forms that cross the light and shadow barrier and the weight of the shadow DOM polyfill. We namespaced our component's CSS rules by prefixing them with the custom element name during a build step. Skipping the shadow DOM also allowed us to do server side rendering of our web components relatively easily using jsdom on an AWS Lambda.

I currently use Web Components at a small startup where we create a search widget government websites embed into their pages. We can deliver a small code footprint which encapsulates a ton of functionality with easy integration steps that supports browsers down to IE11.

Neither of these cases refute your points but they are common examples where Web Components shine.

richharris profile image
Rich Harris Author

Thank you — yep, there are definitely cases where they shine. It's interesting that you had those issues with shadow DOM — in the early days, shadow DOM was kind of the whole point of web components, but I've seen a lot of people back out for similar reasons. Now we see long-running debates about where and whether to use shadow DOM, and whether a given thing belongs in shadow DOM or light DOM. Feels like that distinction has created a lot of extra complexity.

oenonono profile image

Shadow DOM is my favorite part, despite its problems. Custom Elements are just interface for me. I get so much use out content distribution. It's the most important part other than style scoping.

webreflection profile image
Andrea Giammarchi

Shadow DOM is controversial because it plays bad with SSR, and its polyfill is not really specs compliant.

To style Custom Elements you also don't need anything different than you do already, and surely you don't need Shadow DOM at all to have Custom Elements.

Maybe Shadow DOM was sold as the true Web Components must do magic, but since 2014 I've never used it, and never needed it.

We ship Custom Elements to dozen million users, and we never used once attachShadow.

TL;DR the debate about Shadow DOM is pretty simple: don't use Shadow DOM if you target legacy browsers without native Custom Elements V1 support, or use very constrained and simple variants of the spec, like the attachshadow library that works down to IE9.