Software:Lit (library)
| Developer(s) | Google[1] and other contributors[2] |
|---|---|
| Initial release | December 13, 2018 [3] [4] |
| Stable release | 2.0.2
/ October 8, 2021 |
| Repository | github |
| Written in | JavaScript |
| Platform | Web platform |
| Type | JavaScript library |
| License | BSD 3-Clause[1] |
| Website | lit |
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]
- ING Lion Web Components [13]
See also
References
- ↑ 1.0 1.1 "LICENSE". https://github.com/lit/lit/blob/main/LICENSE.
- ↑ "Contributors to Lit". https://github.com/lit/lit/graphs/contributors.
- ↑ Gray Norton (December 13, 2018). "lit-html 1.0 release candidate". https://www.polymer-project.org/blog/2018-12-13-lit-html-rc.
- ↑ Justin Fagnani (February 2019). "Lightning-fast templates & Web Components: lit-html & LitElement". https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html.
- ↑ "Lit". https://lit.dev/.
- ↑ "Polymer". https://github.com/Polymer/polymer#:~:text=LitElement.
- ↑ "Photoshop's journey to the web | Web Components and Lit". Oct 26, 2021. https://web.dev/ps-on-the-web/#web-components-and-lit.
- ↑ "Spectrum Web Components". https://opensource.adobe.com/spectrum-web-components/#:~:text=implemented%20using%20the-,LitElement,-base%20class.%20LitElement.
- ↑ "Auro Design System". https://auro.alaskaair.com/aurolabs/majors#:~:text=and%20best%20practices.-,LitElement,-docs.
- ↑ "Momentum UI Web Components". https://github.com/momentum-design/momentum-ui/tree/master/web-components#:~:text=lit-element.
- ↑ "Material Design Web Components". https://github.com/material-components/material-web#material-web.
- ↑ "Carbon Design System". https://github.com/carbon-design-system/carbon-web-components#:~:text=components%20lit%2Dhtml-,lit%2Delement,-Yarn%3A.
- ↑ "Lion". https://lion-web.netlify.app/#:~:text=Using-,LitElement,-as%20a%20base.
- ↑ "UI5 Web Components". https://github.com/SAP/ui5-webcomponents/blob/master/docs/5-development/02-custom-UI5-Web-Components.md#:~:text=lit-html.
External links
 |  |
