lit-htmlスタンドアロンの使用

Lit は、LitElement のコンポーネントモデルと、JavaScript テンプレートリテラルベースのレンダリングを組み合わせた使いやすいパッケージです。しかし、Lit のテンプレート部分は lit-html というスタンドアロンライブラリに分割されており、効率的に HTML をレンダリングおよび更新する必要がある場合、Lit コンポーネントモデルの外でも使用できます。

lit-html パッケージは、lit とは別にインストールできます。

npm install lit-html

主なインポートは html と render です。

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

スタンドアロンの lit-html パッケージには、完全な Lit 開発者ガイドで説明されている次の機能のモジュールも含まれています。

• lit-html/directives/* - ビルトインディレクティブ
• lit-html/directive.js - カスタムディレクティブ
• lit-html/async-directive.js - カスタム非同期ディレクティブ
• lit-html/directive-helpers.js - 命令型DOMアクセスのためのディレクティブヘルパー
• lit-html/static.js - 静的HTMLタグ
• lit-html/polyfill-support.js - Webコンポーネントポリフィルとのインターフェースのためのサポート（スタイルとlit-htmlテンプレートを参照）

Lit テンプレートは、html タグでタグ付けされた JavaScript テンプレートリテラルを使用して記述されます。リテラルの内容はほとんどプレーンな宣言型の HTML であり、テンプレートの動的な部分を挿入および更新するための式を含めることができます（Lit のテンプレート構文に関する完全なリファレンスについては、テンプレートを参照）。

html`<h1>Hello ${name}</h1>`

lit-html のテンプレート式は、DOM の作成や更新を発生させません。これは DOM の記述のみであり、TemplateResult と呼ばれます。実際に DOM を作成または更新するには、TemplateResult と、レンダリング先のコンテナを render() 関数に渡す必要があります。

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

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

テンプレートを動的にするには、テンプレート関数を作成します。データが変更されるたびにテンプレート関数を呼び出します。

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

// Define a template function
const myTemplate = (name) => html`<div>Hello ${name}</div>`;

// Render the template with some data
render(myTemplate('earth'), document.body);

// ... Later on ...
// Render the template with different data
render(myTemplate('mars'), document.body);

テンプレート関数を呼び出すと、lit-html は現在の式の値を取得します。テンプレート関数は DOM ノードを作成しないため、高速で安価です。

テンプレート関数は、テンプレートと入力データを含む TemplateResult を返します。これは lit-html を使用する主な原則の 1 つです。つまり、状態の関数として UI を作成することです。

render を呼び出すと、lit-html は、前回のレンダリング以降に変更されたテンプレートの部分のみを更新します。これにより、lit-html の更新は非常に高速になります。

render メソッドは、次のオプションを指定できる options 引数も受け取ります。

• host: @eventName 構文を使用して登録されたイベントリスナーを呼び出す際に使用する this の値。このオプションは、イベントリスナーをプレーンな関数として指定する場合にのみ適用されます。イベントリスナーをイベントリスナーオブジェクトを使用して指定した場合、リスナーオブジェクトが this の値として使用されます。イベントリスナーの詳細については、イベントリスナー式を参照してください。

• renderBefore: lit-html がレンダリングする前に、container 内のオプションの参照ノード。デフォルトでは、lit-html はコンテナの最後に追加します。renderBefore を設定すると、コンテナ内の特定の位置にレンダリングできます。

• creationScope: テンプレートのクローン作成時に lit-html が importNode を呼び出すオブジェクト（デフォルトは document）。これは高度なユースケースのために提供されています。

たとえば、lit-html スタンドアロンを使用している場合、次のようなレンダリングオプションを使用できます。

<div id="container">
  <header>My Site</header>
  <footer>Copyright 2021</footer>
</div>

const template = () => html`...`;
const container = document.getElementById('container');
const renderBefore = container.querySelector('footer');
render(template(), container, {renderBefore});

上記の例では、<header> と <footer> 要素の間にテンプレートがレンダリングされます。

lit-html は、1 つのことに重点を置いています。つまり、HTML のレンダリングです。lit-html が作成する HTML へのスタイルの適用方法は、使用方法によって異なります。たとえば、LitElement のようなコンポーネントシステム内で lit-html を使用している場合、そのコンポーネントシステムで使用されているパターンに従うことができます。

一般的に、HTML のスタイルの適用方法は、Shadow DOM を使用しているかどうかに依存します。

• Shadow DOM にレンダリングしていない場合は、グローバルスタイルシートを使用して HTML のスタイルを設定できます。
• Shadow DOM にレンダリングしている場合は、シャドウルート内に <style> タグをレンダリングできます。

動的なスタイル設定を支援するために、lit-html は要素の class 属性と style 属性を操作するための 2 つのディレクティブを提供します。

• classMap は、オブジェクトのプロパティに基づいて要素にクラスを設定します。
• styleMap は、スタイルプロパティと値のマップに基づいて要素にスタイルを設定します。

このページを編集