Lit Introduction

What Is Lit?

Lit is a lightweight library for building Web Components. It adds a reactive component model on top of browser standards such as Custom Elements and Shadow DOM, making it easier to create reusable UI with less boilerplate.

Lit is widely used in design systems, component libraries, and framework-agnostic UI packages because it stays close to web platform APIs while improving developer experience.

Your First Lit Component

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

@customElement("hello-lit")
class HelloLit extends LitElement {
  @property()
  name = "World";

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

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

<hello-lit name="Alex"></hello-lit>

A Lit component extends LitElement, defines styles, declares properties, and returns a template from render().

Why Use Lit?

• Builds on native Web Components standards.
• Provides reactive properties and efficient rendering.
• Uses declarative templates instead of manual DOM code.
• Works across frameworks and plain HTML pages.
• Small bundle size compared with many UI frameworks.
• Great for design systems and shared component libraries.

Lit vs Vanilla Web Components

Installing Lit

npm install lit

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

Install Lit with npm, import the pieces you need, and register components with @customElement() or customElements.define().

Core Lit Features

Typical Lit Component Structure

@customElement("app-card")
class AppCard extends LitElement {
  @property()
  title = "";

  static styles = css`
    :host { display: block; }
    .card { padding: 1rem; border: 1px solid #dbe5f1; }
  `;

  render() {
    return html`
      <article class="card">
        <h2>${this.title}</h2>
        <slot></slot>
      </article>
    `;
  }
}

Most Lit components follow this pattern: decorator registration, properties, styles, and a render() template.

Lit and Shadow DOM

Lit components render into Shadow DOM by default. That gives you style encapsulation and a clean separation between component internals and page markup.

static styles = css`
  :host {
    display: block;
  }

  button {
    background: var(--btn-bg, #2563eb);
    color: white;
  }
`;

Lit's css tagged template works with Shadow DOM and supports theming through CSS custom properties.

Lit Ecosystem

• Used by Google and many design system teams.
• Powers components in framework-agnostic libraries.
• Works with TypeScript and modern build tools.
• Supports decorators and non-decorator syntax.
• Pairs well with Storybook, Vite, and Web Test Runner.
• Complements native Web Components tutorials in this series.

What to Learn Next in Lit

When to Use Lit

• You want Web Components with less manual DOM work.
• You are building a shared design system or UI library.
• You need reactive updates without a full app framework.
• You want standards-based components for multiple frameworks.
• You prefer small, focused libraries over large UI ecosystems.
• You already know Web Components and want a better DX.

When Vanilla Web Components May Be Enough

• The component is very small and unlikely to grow.
• You want zero runtime dependencies.
• You are learning browser standards first before libraries.
• The project has extremely strict bundle size constraints.
• You only need one or two simple custom elements.

Common Lit Use Cases

• Design system buttons, inputs, cards, and dialogs.
• Embeddable widgets for third-party sites.
• Framework-independent UI packages.
• Documentation sites with live component demos.
• Micro frontend UI building blocks.
• Internal company component libraries.

Lit Getting Started Best Practices

• Learn native Web Components basics first.
• Keep components small and focused.
• Use @property() for public API fields.
• Keep render() focused on markup and composition.
• Use Shadow DOM styles with CSS custom properties for theming.
• Document attributes, properties, slots, and events.
• Build one component at a time and test it in isolation.

Common Beginner Mistakes

• Putting side effects inside render().
• Skipping Web Components fundamentals and jumping straight to Lit syntax.
• Using attributes for complex object values.
• Not understanding Shadow DOM styling boundaries.
• Creating overly large components instead of composable ones.
• Forgetting to register the custom element.
• Mixing imperative DOM updates with Lit templates.

Key Takeaways

• Lit is a lightweight library for building Web Components.
• It adds reactive properties, templates, and scoped styles.
• Lit stays close to browser standards while reducing boilerplate.
• It is ideal for design systems and reusable component libraries.
• This tutorial series continues with Lit components, properties, templates, and directives.