Lit vs Svelte: Rethinking Web Component Development
Over the past few months, I’ve built an extensive web component using Lit. It wasn’t a particularly complex project in terms of app scope, since it primarily revolved around creating a reusable component. Because I focus on web standards, Lit felt like the right choice. It helps a lot with rendering updates—specifically, it diffs the dynamic parts of the template and only updates what has changed, rather than rebuilding everything from scratch. That keeps things efficient.
The Core Logic Lived Outside Lit
The core of the component consisted of logic and custom code that manipulated the DOM directly—for example, a custom-built scrollbar with additional markers as navigation targets, plus a fair amount of event handling. All of that was independent of Lit.
Questioning Lit’s Value
Overall, I was disappointed. When you look closely, what does Lit really do? It simplifies the basic setup of a web component—but not so drastically that you couldn’t do it without Lit. Reactivity, of course, is a different story. But since I used very little of it myself, my opinion might differ for other projects. That said, it made me wonder: why not just abstract the rendering part and replace it with something smarter, so you still end up with a fundamentally raw web component at the core?
The Web Components Conundrum: Are Custom Elements Enough?
Effectively, Lit doesn’t add a lot. It’s fine—and it certainly makes it easier to get started with web components. Although, often, Custom Elements alone are enough—they’re the core of a web component, without needing the full stack including Shadow DOM and friends. That said, HTML and CSS didn’t feel particularly at home in my JetBrains IDE. VS Code handles that a bit better. But more importantly, I kept asking myself: do you always really need a full web component? Often, Custom Elements alone are sufficient. And styling isolation in web components can sometimes become a whole different challenge.
A Shift to Svelte for Developer Comfort
For my new projects, I’ll be using Svelte—because now it’s about developer comfort for me. No runtime overhead, just pure, precompiled JavaScript. Sure, it’s a dependency you wouldn’t otherwise need. But let’s be honest: UI code isn’t really used without a bundler anyway. If a little more happens behind the scenes, that’s fine by me. So far, I’ve only experimented with Svelte. I’m really curious to see what it’s like to work with it seriously.