lit

What is lit?

The lit npm package is a simple and fast library for building web components and web applications. It allows developers to create reusable, encapsulated, and interactive elements using modern JavaScript and Web Component standards. Lit is designed to be lightweight and efficient, focusing on speed and minimal overhead.

What are lit's main functionalities?

Creating Web Components

This feature allows developers to create custom web components using the LitElement base class. The example demonstrates defining a new element with a simple style and rendering method.

import { LitElement, html, css } from 'lit';

class MyElement extends LitElement {
  static styles = css`p { color: blue; }`;

  render() {
    return html`<p>Hello, world!</p>`;
  }
}
customElements.define('my-element', MyElement);

Reactive Properties

This feature showcases Lit's reactive property system. The example includes a counter component that updates its display whenever the 'count' property changes.

import { LitElement, html, css, property } from 'lit';

class MyCounter extends LitElement {
  @property({ type: Number }) count = 0;

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

  _increment() {
    this.count++;
  }
}
customElements.define('my-counter', MyCounter);

Styling Components

This feature demonstrates how to apply CSS styles to a Lit component. The example shows defining styles for the component itself and its internal elements.

import { LitElement, html, css } from 'lit';

class StyledElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      border: 1px solid black;
      padding: 16px;
      max-width: 200px;
    }
    .highlight {
      color: red;
    }
  `;

  render() {
    return html`<div class='highlight'>Styled Content</div>`;
  }
}
customElements.define('styled-element', StyledElement);

Other packages similar to lit

react

React is a popular library for building user interfaces. It focuses on a component-based architecture similar to Lit but uses a virtual DOM for updates, which differs from Lit's direct DOM manipulation approach.

vue

Vue is a progressive framework for building UIs. Like Lit, it emphasizes component-based development and reactivity. However, Vue offers a more comprehensive framework experience with options for routing and state management.

svelte

Svelte is a compiler that generates efficient JavaScript code from component declarations. Unlike Lit, which runs in the browser, Svelte shifts much of the work to compile time, resulting in smaller bundles and faster runtime execution.

README

Lit 2.0

Fast, lightweight web components

About this package

The lit package contains everything needed to build Lit components with the LitElement base class, lit-html templates, and all first-party lit-html directives.

Modules:

• lit: The main module exports the core pieces needed for component development: LitElement, html, css, and the most
• lit/decorators.js: Exports all the TypeScript/Babel decorators from one module.
• lit/decorators/...: The decorators/ folder contains a module for each decorator (@customElement(), @property(), etc.) for optimal pay-as-you-go module loading.
• lit/html.js: Just the exports needed for standalone lit-html usage: render(), html, svg, etc.
• lit/static-html.js: The lit-html static.js module
• lit/directives.js: Contains the Directive base class for implementing directives.
• lit/directive-helpers.js: Optional helper utilities for implementing directives.
• lit/async-directive.js: A directive base class that supports disconnection and reconnection.
• lit/directives/...: The directives/ folder contains all of the first-party lit-html directives, like repeat, classMap, etc.
• lit/polyfill-support.js: A module that connects Lit to the web components polyfills where necessary to support older browsers.
• lit/hydrate-support.js: A module that add hydration support to LitElement.