Lit

Overview

Lit is an open-source library designed for building web components. Developed by Google, it provides a concise and performant way to create reusable UI elements using standard web platform features (Lit documentation). Lit's core philosophy centers on leveraging native browser capabilities like Custom Elements and Shadow DOM, rather than abstracting them away with proprietary approaches. This focus results in a small library footprint and a strong alignment with the evolving web standards.

Lit is composed of two main parts: LitElement and Lit HTML. LitElement provides a base class for defining web components with reactive properties and a lifecycle, simplifying the process of creating interactive UI elements (LitElement overview). Lit HTML is a tagged template literal library that enables declarative rendering of HTML within these components, efficiently updating only the parts of the DOM that have changed (Lit HTML templates). This combination allows developers to build components that are interoperable with any JavaScript framework or no framework at all, promoting a "write once, use everywhere" pattern.

The library is particularly well-suited for projects requiring lightweight, high-performance UI components, or for progressively enhancing existing applications without committing to a full-stack framework. Developers familiar with standard web APIs and object-oriented JavaScript often find Lit's approach intuitive. Its emphasis on web standards ensures that components built with Lit are future-proof and have broad browser compatibility (Can I use Web Components?). Lit is also a practical choice for design systems, enabling the creation of a consistent set of UI components that can be shared across different projects and technology stacks within an organization.

Since its inception in 2018, Lit has evolved from its Polymer project roots, streamlining its API and enhancing performance. It is maintained by Google and benefits from ongoing development and community contributions. The library supports both JavaScript and TypeScript, providing type safety and improved developer tooling for those who prefer it (TypeScript with Lit).

Key features

• Web Component Standards Compliance: Builds on native browser APIs like Custom Elements and Shadow DOM for creating reusable and encapsulated UI components (MDN Web Components guide).
• Declarative HTML Templates: Uses Lit HTML, a tagged template literal library, for efficiently rendering and updating UI elements with minimal DOM manipulation (Lit HTML documentation).
• Reactive Properties: Components automatically re-render when their observed properties change, simplifying state management and UI synchronization (Lit reactive properties).
• Small Bundle Size: Offers a minimal runtime footprint, contributing to faster page loads and improved application performance (Lit project goals).
• TypeScript Support: Provides first-class support for TypeScript, including decorators for defining properties and methods, enhancing developer experience and type safety (Lit TypeScript guide).
• Component Lifecycle: Exposes lifecycle callbacks for initialization, rendering, and cleanup, allowing developers to hook into key stages of a component's existence (Lit lifecycle methods).
• Scoped CSS: Leverages Shadow DOM for automatic CSS scoping, preventing style conflicts and ensuring component encapsulation (Lit styling).
• Event Handling: Provides a standard way to handle DOM events within components, supporting both declarative and imperative event listeners (Lit event handling).

Pricing

Lit is an entirely free and open-source library.

Common integrations

Given Lit's focus on standard web components, its integrations are primarily with the web platform itself and other tools that work with standard HTML, CSS, and JavaScript elements. Components built with Lit can be integrated into virtually any web project.

• Build Tools (Vite, Webpack, Rollup): Lit components compile down to standard JavaScript, making them compatible with modern build tools for bundling and optimization (Vite documentation).
• Frameworks (React, Vue, Angular): Lit web components can be used within applications built with frameworks like React (React custom components), Vue (Vue Web Components), or Angular, acting as interoperable UI primitives.
• CSS Preprocessors (Sass, PostCSS): Styles within Lit components can be authored using CSS preprocessors and then processed before being included in the component's styles (Sass documentation).
• Static Site Generators (Astro, Next.js, Gatsby): Lit components can be rendered within static sites or server-rendered applications, often through client-side hydration (Astro framework components).
• Testing Libraries (Web Test Runner, Jest): Components can be tested using standard JavaScript testing frameworks, often with specific utilities provided by Lit for rendering and interacting with components in a test environment (Lit testing guide).

Alternatives

• Stencil: A compiler that generates web components, also focused on standard web APIs, often used for design systems.
• Vue.js: A progressive framework for building user interfaces, which can also be used to create web components.
• React: A JavaScript library for building user interfaces, commonly used for large-scale single-page applications, with various methods to integrate web components.

Getting started

To begin building a Lit web component, you typically install the Lit package and then define a custom element using a JavaScript class that extends LitElement. This example creates a simple counter component.

// my-counter.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`
    :host {
      display: block;
      border: 1px solid #ccc;
      padding: 16px;
      text-align: center;
      font-family: sans-serif;
    }
    button {
      padding: 8px 16px;
      font-size: 1em;
      cursor: pointer;
      margin: 0 8px;
    }
  `;

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

  render() {
    return html`
      
Counter: ${this.count}
      -
      +
    `;
  }

  private _increment() {
    this.count++;
  }

  private _decrement() {
    this.count--;
  }
}

Once defined, you can use this component in your HTML like any other standard HTML element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lit Counter Example</title>
  <script type="module" src="./my-counter.js"></script>
</head>
<body>
  <my-counter></my-counter>
</body>
</html>

This setup demonstrates how to define a custom element, manage reactive properties, render declarative HTML using lit-html, and apply scoped styles with static styles. The @customElement and @property decorators are part of Lit's TypeScript support, simplifying component definition.