Lit — Simple Library for Fast Lightweight Web Components

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

FAQ

Q: Are Web Components worth using? A: Great for design systems, cross-team reuse, and long-lived projects (unaffected by framework churn). Not ideal for rapid-iteration frontends that need JSX/function-component DX.

Q: Can it be used with React? A: Yes. Lit components are standard HTMLElements, so <my-counter count={5}></my-counter> works in React. For events, use a ref + addEventListener.

Q: SSR support? A: @lit-labs/ssr provides server-side rendering. It's still experimental but usable.

Sources & Credits

• Docs: https://lit.dev
• GitHub: https://github.com/lit/lit
• License: BSD 3-Clause