Web Components Are Not Dead
We're Just Using Them Wrong
I personally love Web Components. I think they are brilliant and easily one of the most underrated technologies on the web.1 In our React-dominated world, those who have truly dived deep into WCs are far fewer than those who simply talk about them. Naturally, there are highly knowledgeable developers who spent years in the trenches only to conclude that the best option was to get out. Among them are influential individuals who have given a lot to the JS community, pushing the boundaries of what web frameworks can do.2
But I have to wonder: what if we've been using them wrong all along? What if the Shadow DOM was actually a mistake?3 What if the greatest gift of the Shadow DOM, its subtree encapsulation,4 is exactly what makes these custom elements so inaccessible?
What if we stop listening to how others think it should be used?
The way we build for the web has changed. In most cases, the developer has full control over the rendered page. Historically, the biggest argument for encapsulation was isolation, the idea that a component living in its own "bubble" wouldn't be affected by external factors like the CSS cascade. While this looks like an elegant pattern, it is a double-edged sword.
Interoperability between components using these patterns can become a nightmare. You can make it work, but the Developer Experience required to get results is significantly worse than that of modern frameworks. This friction is exactly what drives potential adopters toward more popular, "easier" frameworks.
The web is full of "best practices"5 and opinionated takes on how you should or shouldn't use Web Components. I used to take these rules very seriously, but I think it's time to move on. The Web Component community moves slower than a TC39 proposal. Everyone has an opinion, and someone who has been in the game for 20 years is unlikely to change their mind overnight.
That's why I believe the solution is already here: Embrace the Light DOM.
By using the Light DOM with Web Components, you stay in the normal DOM. You can use standard stylesheets, modern tooling (like Tailwind) works out of the box, and you can handle SSR (Server-Side Rendering) without the complications of style duplication or Declarative Shadow DOM hurdles. This makes Web Components first-class citizens of the DOM tree, no longer scoped behind boundaries, but free to interact with the rest of the page.
This is why I created Radiant, a tiny library that lets you use Web Components in a way that has always been possible but which many were too scared to advocate for. I suspect many people are already doing this in secret because "purists" will inevitably claim it's "not the right way."
I think there is a beautiful simplicity in this approach. I've been heavily influenced by Lit, and I appreciate how other libraries have tried to find their way. I also have to admit... I really like decorators.
For too long, we've been told that the Shadow DOM is the only way forward. We hid our components behind artificial walls, but those walls often turned into a trap. They brought dark days of fighting with CSS, breaking accessibility, and dealing with endless integration headaches.
We don't need to hide our code in the shadows just to build things the 'right' way. By choosing the Light DOM, we choose to let our components play nice with the rest of the web. The platform works best when we stop fighting it.
It's time to step out of the shadows. It's time to build in the light.