# 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.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i lit
```

```ts
// 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>
    `;
  }
}
```

```html
<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.

- **Repo**: https://github.com/lit/lit
- **Stars**: 21K+
- **Language**: TypeScript
- **License**: BSD 3-Clause

## 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: 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

---
Source: https://tokrepo.com/en/workflows/lit-simple-library-fast-lightweight-web-components-25e2a55c
Author: AI Open Source