Lit
By Google / open source
Lit is a lightweight JavaScript library for building fast, standards-based Web Components using efficient reactive templates and minimal boilerplate.
Definition
Lit is a lightweight JavaScript library for building fast, standards-based Web Components using efficient reactive templates and minimal boilerplate.
Overview
Lit is the successor to Polymer, created by many of the same Google engineers to provide a smaller, faster way to author custom elements once native browser support for Web Components became widespread. Instead of relying on heavy polyfills, Lit assumes modern browser support and focuses on making the developer experience of writing custom elements as pleasant as using a component framework like React or Vue.js. At its core, Lit uses tagged template literals (`html\`...\``) for declarative, efficient DOM rendering, and a base `LitElement` class that adds reactive properties — when a property changes, only the affected parts of the template re-render, similar in spirit to a virtual DOM diff but implemented directly against real DOM templates. Because Lit-based components compile down to standard Custom Elements with Shadow DOM, they can be dropped into any framework or plain HTML page, making Lit a popular choice for design systems and component libraries meant to be framework-agnostic — notably used in projects like Adobe's Spectrum and parts of YouTube's frontend.
Key Features
- Tagged template literals for declarative, efficient HTML rendering
- Reactive properties that trigger minimal, targeted re-renders
- Compiles to standard Custom Elements usable in any framework
- Shadow DOM encapsulation by default for style isolation
- Small runtime size compared to full application frameworks
- Decorators for concise property and state declarations
- SSR support for server-rendering Lit components