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.