The Polymer Project Releases Lit-Html and LitElement for Performance-Focused Web Components

The Polymer Project recently released lit-html v1.0 together with LitElement v2.0. lit-html is a light-weight, extensible HTML templating JavaScript library, which can be used independently or together with LitElement. LitElement is a JavaScript library to create lightweight web components. Performance is a key design goal for those two libraries which work together to allow developers to create web components which reactively, efficiently re-render when their state or properties change. The created web components can then be used in any framework or no framework to build web applications.

lit-html is an HTML templating library designed for efficient updates of the DOM. Contrary to other front-end rendering libraries (like React, Vue, Dojo 2, and Angular 2), lit-html does not use a Virtual DOM (VDOM).

The major advantage of VDOM is to support a declarative, purely functional description of a view to render, instead of a series of piecemeal, ad-hoc, hard-to-maintain description of DOM operations to execute as a result of user events. VDOM-based libraries automatically derive those DOM update operations from the functional description of the DOM, through a process called reconciliation.

The reconciliation process compares a new VDOM version to an older one by walking both VDOM trees and generating a list of operations which take the old tree to the new one. For large trees, the cost of generating a new VDOM tree and traversing the VDOM data structure may be prohibitive. For that reason, VDOM-based libraries may include an escape hatch to allow developers to customize the reconciliation process and skip entire branches of the VDOM tree.

lit-html uses a html template tag which allows developers to describe the DOM declaratively without the need for a reconciliation process. From the template, lit-html can deduce the operations to perform when a variable changes, and perform exactly those operations on the corresponding DOM nodes, without paying the cost associated to generating a new virtual version of the DOM and the subsequent reconciliation.

The following example showcases the syntax and main API supporting lit-html:

import {html, render} from 'lit-html';

// A lit-html template uses the `html` template tag:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;

// It's rendered with the `render()` function:
render(sayHello('World'), document.body);

// And re-renders only update the data that changed, without VDOM diffing!
render(sayHello('Everyone'), document.body);

lit-html syntax can be extended through directives. lit-html additionally uses native platform features like HTML <template> elements with native, efficient cloning. lit-html also does not require an extra JSX compilation step, while taking advantage of the native JavaScript template syntax. The documentation explains:

Templates are values that can be computed, passed to and from functions and nested. Expressions are real JavaScript and can include anything you need.
lit-html supports many kind of values natively: strings, DOM nodes, heterogeneous lists, nested templates and more.
(…) It focuses on one thing and one thing only: efficiently creating and updating DOM.

lit-html does not include a component model. LitElement adds the possibility to declaratively define web components, with lit-html as a rendering engine. The documentation details the key benefits derived from using web standards:

LitElement follows the Web Components standards, so your components will work with any framework.
LitElement uses Custom Elements for easy inclusion in web pages, and Shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.

A basic LitElement component can be defined as follows:

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

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

and used as regular HTML, in any framework, as follows:

<simple-greeting name="Everyone"></simple-greeting>

The lighterhtml library provides similar functionalities to lit-html. The hyperhtml-element similarly supports functionalities close to those of LitElement.

lit-html and LitElement are open-source software available under the BSD-3 license. Feedback, including bugs and feature requests, is encouraged via the lit-html GitHub project and the LitElement GitHub project.