What is lit-element?
The lit-element package is a simple base class for creating fast, lightweight web components with the Lit library. It provides a declarative template system that ties your markup to your component's properties and state, along with reactive updates and a component lifecycle.
What are lit-element's main functionalities?
Declarative Templates
LitElement uses `html` tagged template literals to define templates that are bound to the component's properties. When properties change, the template is efficiently re-rendered.
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
static get properties() {
return {
message: { type: String }
};
}
constructor() {
super();
this.message = 'Hello, World!';
}
render() {
return html`<p>${this.message}</p>`;
}
}
customElements.define('my-element', MyElement);
Reactive Properties
Properties can be made reactive using the `@property` decorator. When a reactive property changes, LitElement automatically updates the component's template.
import { LitElement, html, property } from 'lit-element';
class MyElement extends LitElement {
@property({ type: String }) greeting = 'Hello';
render() {
return html`<h1>${this.greeting}, World!</h1>`;
}
}
customElements.define('my-element', MyElement);
Lifecycle Methods
LitElement provides lifecycle methods such as `firstUpdated`, `updated`, and `disconnectedCallback` for managing the component's lifecycle events.
import { LitElement } from 'lit-element';
class MyElement extends LitElement {
firstUpdated(changedProperties) {
console.log('Component first updated!');
}
updated(changedProperties) {
console.log('Component updated with changed properties:', changedProperties);
}
disconnectedCallback() {
console.log('Component removed from the DOM!');
}
}
customElements.define('my-element', MyElement);
Other packages similar to lit-element
react
React is a popular library for building user interfaces. It uses a virtual DOM for efficient updates, which is different from LitElement's direct DOM manipulation. React components are typically more verbose and use JSX for templating.
vue
Vue is a progressive framework for building UIs. Like LitElement, it offers a reactive and composable data model. Vue uses a virtual DOM similar to React and has a more opinionated structure, including a focus on single-file components.
svelte
Svelte is a compiler that generates efficient JavaScript code for creating web components. Unlike LitElement, which updates the DOM in response to property changes, Svelte compiles components to update the DOM directly, which can result in better performance for some applications.
stencil
Stencil is a compiler that generates web components with a focus on performance and compatibility. It provides a set of features similar to LitElement but includes a virtual DOM and TypeScript support out of the box.
lit-element
Implements lit-html via a LitElement class. Made for custom Elements.
Installation
You can get it through npm or yarn
npm install lit-element
yarn add lit-element
Default Usage
import {html} from '../node-modules/lit-html/lit-html.js'
import {LitElement} from '../node_modules/lit-element/lit-element.min.js'
class MyElement extends LitElement(HTMLElement) {
static get properties() {
return {
title: String,
body: {
type: String,
value: 'That is a cool LitElement'
}
}
}
render() {
this.title = 'This is lit';
return html`
<h1 id="title">${this.title}</h1>
<p>${this.body}</h1>
`;
}
afterFirstRender() {
this.$.title.classList.add('title--main')
}
}
Notes
- This Element does not use Polymer, just Polymer-like syntax for properties.
- Currently only
reflectToAttribute
and value
are supported for properties.