Lit Explained: Web Components Without the Framework

Introduction

Frameworks come and go, but web components — custom elements, shadow DOM, HTML templates — are browser standards, supported everywhere, with no framework to outgrow. The catch has always been boilerplate: raw web components need a lot of ceremony for reactivity and templating. Lit, released in 2019 by Google, removes that ceremony: a tiny library (about 5KB) that adds reactive properties and declarative templates to standard web components, so you build framework-free components that work in any page, with any framework, forever.

Reactive properties and declarative templates

Lit's model is small and standards-based:

  • LitElement — a base class extending HTMLElement, adding reactivity: declare a property, and Lit re-renders the component when it changes.
  • Reactive properties — decorated fields (or a static properties definition) that trigger updates on change, with attribute reflection for HTML attributes.
  • html templates — tagged template literals that describe the DOM declaratively, with expressions for dynamic values and event bindings, efficiently updated in place.
  • Shadow DOM — styles and markup encapsulated per component by the platform itself, so a component's CSS never leaks.

A counter shows the whole model — a custom element, reactive state, and a template, in a few lines:

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@customElement("my-counter")
class MyCounter extends LitElement {
  @state() count = 0;
  render() {
    return html`
      <button @click=${() => this.count++}>
        Clicks: ${this.count}
      </button>
    `;
  }
}

Use it anywhere with <my-counter></my-counter> — in a React app, a Vue app, plain HTML, or another framework's page, with no adapter. That portability is Lit's whole argument.

The honest trade

Lit's trade is ecosystem and ergonomics: fewer ready-made component libraries than React, and shadow DOM styling has its own learning curve (theming across shadow boundaries needs CSS custom properties). Server rendering exists but is younger than React's. The rule of thumb: Lit when building shareable, framework-agnostic components or design systems; a full framework when building an entire app with routing, state management, and a large ecosystem.

Takeaway

Lit is web components without the framework: reactive properties, declarative templates, and shadow DOM encapsulation, on browser standards, in about 5KB. It trades framework ecosystem for components that outlive frameworks — and for design systems, that longevity is the point.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and, unusually for a systems language, genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally use ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small: fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy: threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait; it start...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls: everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them, each a widget, composed by nesting. Layout widgets (like Row, Column, and Padding) do the arranging, so there is n...
Read more