Lit (library)

Lit is an open-source JavaScript library for building web components and web applications^[5]. Lit is the successor to the Polymer library ^[6] 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^[7], Spectrum Web Components ^[8]

• Alaska Airlines Auro Design System ^[9]

• Cisco Momentum UI ^[10]

• Google Material Design Web Components ^[11]

• IBM Carbon Web Components ^[12]

• ING Lion Web Components ^[13]

• SAP UI5 Web Components ^[14]

See also

• Web Components
• Polymer (library)

References

External links

• Official website
• on GitHub

0.00 (0 votes) Original source: https://en.wikipedia.org/wiki/Lit (library). Read more