ConfigsApr 11, 2026·1 min read

Lit — Simple Library for Fast Lightweight Web Components

Lit is a simple library for building fast, lightweight web components. Built by Google on top of the standard Web Components APIs, it provides reactive properties, scoped styles, and a declarative templating system in about 5KB.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i lit
// my-element.ts
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("my-counter")
export class MyCounter extends LitElement {
  static styles = css`
    button { padding: 0.5rem 1rem; font-size: 1rem; }
  `;

  @property({ type: Number }) count = 0;

  render() {
    return html`
      <button @click=${() => this.count++}>
        Clicked ${this.count} times
      </button>
    `;
  }
}
<my-counter count="5"></my-counter>
<script type="module" src="./my-element.js"></script>
Intro

Lit is a simple library for building fast, lightweight web components. Created at Google (successor to Polymer), Lit embraces the Web Components standards (Custom Elements, Shadow DOM, HTML templates) and adds just enough sugar: reactive properties, scoped styles, and efficient template re-renders. Used at Google, Adobe, Photoshop Web, and many design systems.

What Lit Does

  • LitElement — base class for reactive web components
  • html template tag — efficient tagged-template rendering
  • css template tag — scoped Shadow DOM styles
  • Reactive properties — declarative observed attributes
  • Lifecycle — connected/disconnected/updated callbacks
  • Directives — repeat, when, classMap, styleMap, ref
  • SSR — @lit-labs/ssr for server rendering
  • Interop — components work in React, Vue, Angular, plain HTML

Architecture

Lit compiles tagged templates into efficient render instructions (parts system), only updating the DOM bindings that changed. Components extend LitElement, get reactive property handling, and use Shadow DOM for style scoping. Output is plain web components — no framework lock-in.

Self-Hosting

Client library.

Key Features

  • ~5KB gzipped runtime
  • Standards-based (Web Components)
  • Reactive properties
  • Shadow DOM scoping
  • Efficient template re-renders
  • Framework interop (React/Vue/Angular)
  • SSR via @lit-labs/ssr
  • TypeScript decorators
  • Directive API for custom behavior

Comparison

Library Paradigm Standard Bundle Interop
Lit Web Components Yes ~5KB Universal
Stencil Web Components Yes Variable Universal
React Virtual DOM No 45KB React only
Svelte Compiled No Variable Own runtime
FAST Web Components Yes ~10KB Universal

常见问题 FAQ

Q: Web Components 值得用吗？ A: 适合设计系统、跨团队复用、长期项目（不受框架更迭影响）。不适合需要 JSX/函数组件 DX 的快速迭代前端。

Q: 和 React 能一起用吗？ A: 能。Lit 组件就是标准 HTMLElement，React 里 <my-counter count={5}></my-counter> 即可。事件要用 ref + addEventListener。

Q: SSR 支持？ A: @lit-labs/ssr 提供 server-side render。还在实验阶段但已可用。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

bat — A cat Clone with Wings and Syntax Highlighting

bat is a cat clone with wings — syntax highlighting, Git integration, automatic paging, and line numbers. A drop-in replacement for cat that shows code and configs beautifully in your terminal. Written in Rust.

AI Open Source

fzf — Blazing Fast Command-Line Fuzzy Finder

fzf is a general-purpose command-line fuzzy finder written in Go. Blazing fast, portable, and composable with any list-producing command. Interactive picker for files, commands, history, git branches, processes, and more.

AI Open Source

RxJS — Reactive Programming Library for JavaScript

RxJS is a reactive extensions library for JavaScript using Observables for composing asynchronous and event-based programs. 100+ operators for transforming, filtering, and combining streams. The foundation of Angular and many complex UIs.

AI Open Source
◈Home🔍Search👤Me