Lit (framework)

Definition

Lit is a lightweight JavaScript library, maintained by Google, for building Web Components using reactive properties, declarative templates, and efficient DOM updates on top of native browser Custom Elements and Shadow DOM APIs.

Overview

Lit exists to make the native Web Components standard — Custom Elements, Shadow DOM, and HTML templates — pleasant to work with directly, rather than replacing it with a framework-specific component model. Writing Web Components with only the raw browser APIs is verbose: manually diffing and updating the DOM, managing attribute-to-property reflection, and re-rendering efficiently all require boilerplate that Lit provides as a thin, opinionated layer on top. A Lit component is a class that extends `LitElement`, declares reactive properties, and implements a `render()` method returning a template written with Lit's tagged template literal syntax (`html`), which Lit efficiently diffs and updates without a virtual DOM. Because Lit compiles down to standard Custom Elements, components built with it are usable in any framework or none at all — a Lit-based button or date picker works the same whether it's dropped into a React app, a Vue app, a plain HTML page, or another Lit application, since the browser itself understands the resulting custom element. This framework interoperability is Lit's core value proposition, particularly for design systems and component libraries shared across teams that don't all use the same frontend stack. Google's Material Web Components and Adobe's Spectrum Web Components are both built on Lit for exactly this reason. Lit uses Shadow DOM by default for style and DOM encapsulation, meaning a component's internal markup and CSS don't leak out to or get affected by the surrounding page, though this can be selectively disabled. Its reactive property system automatically triggers a re-render when a decorated property changes, and templates use efficient, targeted DOM patching rather than re-creating nodes, keeping updates fast even in large component trees. Lit is comparatively small (around 5KB minified and gzipped for its core), which is one of its main selling points relative to full application frameworks, though unlike React or Vue it deliberately does not include routing, global state management, or an opinionated application architecture — those remain the application's responsibility.

Key Features

• Built on native Web Components: Custom Elements and Shadow DOM
• Declarative templates via tagged template literals (the html function)
• Reactive properties that automatically trigger efficient re-renders
• Framework-agnostic output — components work in React, Vue, Angular, or plain HTML
• Shadow DOM encapsulation by default for style and markup isolation
• Small runtime footprint (roughly 5KB core, minified and gzipped)
• No virtual DOM — uses targeted, efficient DOM patching
• Widely used as the foundation for shared design systems (Material Web, Spectrum Web Components)

Use Cases

Alternatives

History

Lit is an open-source library from Google that has been in development since 2018, growing out of the Chrome team's Polymer project but now maintained independently of it. It was first shipped as two pieces — lit-html, a fast HTML templating library, and LitElement, a base class for web components — which were later unified under the Lit name. Lit builds directly on the browser's native Web Components standards, so components authored with it are real custom elements that work in any framework or with none at all. The library is deliberately tiny (on the order of a few kilobytes) and provides reactive properties, scoped styles, and declarative templates; it is now on its version 3 generation.

Frequently Asked Questions

Related in Web