Lit

Lit is a web components-based framework maintained by Google. It builds on top of the Web Components standard (custom elements, Shadow DOM, HTML templates) while making it more ergonomic and developer-friendly. Unlike heavier frameworks that abstract the DOM away, Lit keeps you close to native browser APIs, but with sugar that makes working with components fast, expressive, and reactive.

At its core, Lit is just small, fast utilities for building components, not a full application framework. That means it plays nicely with whatever stack you’re already using. Because it’s based on Web Standards, your components can run anywhere in plain HTML pages, React apps, Angular projects, or even server frameworks, without lock-in.

The Use Case

When to use (pros)

• Standards-first: Built on Web Components, so your code is future-proof and framework-agnostic.
• Lightweight: Very small runtime (~5KB gzipped) compared to full frameworks.
• Interoperable: Components can be used across projects and frameworks (React, Vue, Angular, etc.) without major changes.
• Reactive properties: Automatically updates the DOM when state changes, with a declarative, minimal syntax.
• Scoped styles with Shadow DOM: CSS is encapsulated, avoiding global style conflicts.
• Great for design systems: Perfect for building UI libraries and shared component systems that need to work everywhere.
• Familiar templates: Uses standard JavaScript template literals (html“), avoiding custom syntax like JSX or Angular templates.

When not to use (cons)

• Not a full framework: Unlike Angular or Qwik, Lit doesn’t give you routing, state management, or data-fetching utilities. You’ll need to bring your own tools.
• Learning curve with Web Components: If you’ve only worked with frameworks like React, the concepts of custom elements and Shadow DOM might feel different at first.
• Smaller ecosystem: While growing, it’s not as vast as React or Vue. Tutorials and third-party libraries may be harder to find.
• Verbose boilerplate: Even with Lit’s helpers, defining properties, decorators, and lifecycle hooks can feel heavier than something like Alpine.js or Svelte.
• Performance nuances: Web Components don’t always play well with server-side rendering (though Lit has some SSR support).

Quote

“It’s solving problems that other things don’t solve, but I also wouldn’t use it for large things.” _{- Theo 24th December 2023}