Lit (library)

LitDeveloper(s)| Google[1] and other contributors[2]

|

Initial release| December 13, 2018; 7 years ago (2018-12-13) [3] [4]
Stable release|

2.0.2 / October 8, 2021; 4 years ago (2021-10-08)

Repository| github.com/lit/lit
Written in| JavaScript
Platform| Web platform
Type| JavaScript library
License| BSD 3-Clause[1]
Website| lit.dev

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.

## Contents

* 1 Overview
* 2 Example
* 2.1 TypeScript
* 2.2 JavaScript
* 3 Adoption
* 4 See also
* 5 References
* 6 External links

## 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

1. ↑ 1.0 1.1 "LICENSE". https://github.com/lit/lit/blob/main/LICENSE.
2. ↑ "Contributors to Lit". https://github.com/lit/lit/graphs/contributors.
3. ↑ Gray Norton (December 13, 2018). "lit-html 1.0 release candidate". https://www.polymer-project.org/blog/2018-12-13-lit-html-rc.
4. ↑ 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.
5. ↑ "Lit". https://lit.dev/.
6. ↑ "Polymer". https://github.com/Polymer/polymer#:~:text=LitElement.
7. ↑ "Photoshop's journey to the web | Web Components and Lit". Oct 26, 2021. https://web.dev/ps-on-the-web/#web-components-and-lit.
8. ↑ "Spectrum Web Components". https://opensource.adobe.com/spectrum-web-components/#:~:text=implemented using the-,LitElement,-base class. LitElement.
9. ↑ "Auro Design System". https://auro.alaskaair.com/aurolabs/majors#:~:text=and best practices.-,LitElement,-docs.
10. ↑ "Momentum UI Web Components". https://github.com/momentum-design/momentum-ui/tree/master/web-components#:~:text=lit-element.
11. ↑ "Material Design Web Components". https://github.com/material-components/material-web#material-web.
12. ↑ "Carbon Design System". https://github.com/carbon-design-system/carbon-web-components#:~:text=components lit-html-,lit-element,-Yarn:.
13. ↑ "Lion". https://lion-web.netlify.app/#:~:text=Using-,LitElement,-as a base.
14. ↑ "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

* Official website
* on GitHub

0.00

(0 votes)

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Software:Lit_(library)&oldid=3897636"