レンダリング

lit-htmlのテンプレートにおけるJavaScript評価式によってDOMが作成または更新されることはありません。 これはTemplateResultと呼ばれるDOMの雛形にすぎません。実際にDOMを作成または更新するには、レンダリングするコンテナとともに TemplateResultrender()関数に渡す必要があります:

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

const sayHi = (name) => html`<h1>こんにちは ${name}</h1>`;
render(sayHi('アミー'), document.body);

// このレンダリングはDOMを更新します
render(sayHi('ゾエ'), document.body);

オプション

renderメソッドはoptions引数を取ります。これを使うと以下のオプションを指定することができます:

たとえば、コンポーネントクラスを作成している場合は、次のようなレンダリングオプションを使用します:

class MyComponent extends HTMLElement {
  // ...

  _update() {
    // イベントリスナーをMyComponentの現在のインスタンスにバインドします
    render(this._template(), this._renderRoot, {eventContext: this});
  }
}

レンダリングオプションは、その後のrender呼び出しの間に変更されるべきではありません