Recipe

Lit primer

A fast, declarative way to build web components with zero framework lock-in. Lit gives you reactive templates, scoped styles, and native custom elements — all in a 5 kB bundle.

Why Lit?

Renders directly to the platform — no virtual DOM overhead.
Works anywhere HTML works: React, Vue, plain pages, legacy apps.
First-class TypeScript support with decorators and type-safe templates.
Scoped CSS via shadow DOM or adopted stylesheets — no leakage.

Quick start

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

@customElement('my-element')
export class MyElement extends LitElement {
  @property() name = 'World';

  static styles = css`
    p { color: #8B5CF6; font-weight: 600; }
  `;

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

Key concepts

Reactive properties

Decorated @property() fields trigger efficient re-renders when changed.

Tagged templates

The html tagged template literal produces live DOM, not strings.

Scoped styles

Static styles field uses adopted stylesheets — no style collisions.

Lifecycle

Standard callbacks: connectedCallback, disconnectedCallback, and more.

Ready to go deeper? Check the official Lit docs for the full API reference and component catalog.