Lit — Simple Library for Fast Lightweight Web Components

What it is

Lit is a library built by Google for creating web components using standard Web Components APIs. It adds reactive properties, scoped CSS styles, and a declarative HTML templating system on top of the native Custom Elements and Shadow DOM specifications. The entire library is about 5KB gzipped.

Lit targets frontend developers who want framework-agnostic UI components. Components built with Lit work in any framework (React, Vue, Angular) or with no framework at all, because they compile down to native browser APIs.

How it saves time or tokens

This workflow provides the npm install and a working component template. Instead of learning the raw Custom Elements API and Shadow DOM boilerplate, you get a class-based component model with automatic re-rendering when properties change. The included counter example is a complete, runnable component.

How to use

1. Install Lit:

npm i lit

1. Create a web component:

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: 8px 16px; font-size: 16px; }
    span { margin: 0 12px; font-weight: bold; }
  `;

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

  render() {
    return html`
      <button @click=${() => this.count--}>-</button>
      <span>${this.count}</span>
      <button @click=${() => this.count++}>+</button>
    `;
  }
}

1. Use the component in any HTML page:

<script type="module" src="./my-counter.js"></script>
<my-counter count="5"></my-counter>

Example

import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('user-card')
export class UserCard extends LitElement {
  static styles = css`
    :host { display: block; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; }
    .name { font-size: 1.2em; font-weight: 600; }
    .email { color: #6b7280; }
  `;

  @property() name = '';
  @property() email = '';
  @state() private expanded = false;

  render() {
    return html`
      <div class="name">${this.name}</div>
      <div class="email">${this.email}</div>
      <button @click=${() => this.expanded = !this.expanded}>
        ${this.expanded ? 'Less' : 'More'}
      </button>
      ${this.expanded ? html`<slot></slot>` : ''}
    `;
  }
}

Related on TokRepo

• AI coding tools -- Frontend development tools
• Design tools -- UI component design resources

Common pitfalls

• Lit uses Shadow DOM by default, which scopes styles. Global CSS does not penetrate shadow boundaries. Use CSS custom properties (variables) for theming across components.
• TypeScript decorators (@customElement, @property) require experimentalDecorators in tsconfig.json. Without it, compilation fails.
• Lit components must be registered with unique tag names. Using a name that conflicts with existing HTML elements or other custom elements causes errors.