lit-html is now part of the Lit library–see the new site at lit.dev. This site documents lit-html 1.0, no longer the current version.

Rendering templates

A lit-html template expression does not cause any DOM to be created or updated. It's only a description of DOM, called a TemplateResult. To actually create or update DOM, you need to pass the TemplateResult to the render() function, along with a container to render to:

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

const sayHi = (name) => html`<h1>Hello ${name}</h1>`;
render(sayHi('Amy'), document.body);

// subsequent renders will update the DOM
render(sayHi('Zoe'), document.body);

Render Options

The render method also takes an options argument that allows you to specify the following options:

For example, if you're creating a component class, you might use render options like this:

class MyComponent extends HTMLElement {
// ...

_update() {
// Bind event listeners to the current instance of MyComponent
render(this._template(), this._renderRoot, {eventContext: this});
}
}

Render options should not change between subsequent render calls.