Lit (library)

---

Lit

Developer(s)	Google and other contributors
Initial release	December 13, 2018 (2018-12-13)
Stable release	2.0.2 / October 8, 2021 (2021-10-08)
Repository	github.com/lit/lit
Written in	JavaScript
Engine
Platform	Web platform
Type	JavaScript library
License	BSD 3-Clause
Website	lit.dev

Search Lit (library) on Amazon.

Lit is an open-source JavaScript library for building web components and web applications. Lit is the successor to the Polymer library and is developed by Google and other contributors on GitHub.

Overview

Lit provides an HTML templating engine and a base class called LitElement. The templating engine makes use of JavaScript template literals to create and dynamically update the DOM of a webpage. The LitElement base class extends the built-in HTMLElement class, providing the ability to render Lit templates to the component's Shadow DOM, and to automatically re-render when its properties or attributes change.

Example

The following examples in TypeScript and JavaScript define a new HTML element called <simple-greeting>. This new HTML element can be used just like built-in HTML elements such as <button>, with the browser referring to the implementation defined below to determine what should be displayed. When the name property or attribute changes, the Shadow DOM within the component will be re-rendered to reflect the new value.

TypeScript

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

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

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

JavaScript

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

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

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting)

Adoption

Lit has been adopted by a number of companies for creating web component systems:

• Adobe Photoshop for the web, Spectrum Web Components

• Alaska Airlines Auro Design System

• Cisco Momentum UI

• Google Material Design Web Components

• IBM Carbon Web Components

• ING Lion Web Components

• SAP UI5 Web Components

See also

• Web Components
• Polymer (library)

External links

• Official website
• lit on GitHub

This article "Lit (library)" is from Wikipedia. The list of its authors can be seen in its historical and/or the page Edithistory:Lit (library). Articles copied from Draft Namespace on Wikipedia could be seen on the Draft Namespace of Wikipedia and not main one.

📰 Article(s) of the same category(ies)

• Jamovi
• Nutcache
• Cyclos
• Virtuoso QA
• FireTune
• Otherweb
• Spagic

---