使ってみる

インストール

npm

lit-htmlはnpmのlit-htmlパッケージで配布されています。

npm install lit-html

unpkg.com

unpkg.comのCDNから直接読み込むこともできます:

import {html, render} from 'https://unpkg.com/lit-html?module';

オンラインエディタ

インストールをせずに試すこともできます。以下のリンクはオンラインエディタによるシンプルなlit-html starterプロジェクトです。

インポート

lit-htmlは標準的なJavaScriptモジュールとして作成されています。 JavaScriptモジュールは既にChrome、Opera、Safariで使え、まもなくFirefoxとEdgeでも使えるようになります。

lit-htmlを使うには、importでパスを指定します。

<script type="module">
  import {html, render} from './node_modules/lit-html/lit-html.js';
  ...
</script>

JavaScriptのimport<script type="module">内でのみ動作し、インライン(上記のように)か外部スクリプトとして読み込む必要があります。

ブラウザ上ではインポートの指定にパッケージ名を使うことはできず、他のモジュールを指定する場合もバンドラー等の別ツールを使わない限りパスを直接指定する必要があります。

もしパッケージ名をパスに変換するツールを使っている場合は、パッケージ名を指定してインポートできます。

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

簡潔にするために、ドキュメントの例ではパッケージ名(nodeスタイルのモジュール形式)を使用しています。

nodeスタイルのモジュール形式指定子をブラウザスタイルのモジュール形式に変換するために使用できるビルドツールと開発サーバーについては、ツールを参照してください。

なぜJavaScriptモジュールなのか? JavaScriptモジュールで作成される詳細については、JavaScript Modulesを参照してください。

テンプレートの描画

lit-htmlには2つの主要なAPIがあります:

// lit-htmlをインポート
import {html, render} from 'lit-html';

// テンプレートを定義
const myTemplate = (name) => html`<p>Hello ${name}</p>`;

// テンプレートをページに描画
render(myTemplate('World'), document.body);

テンプレートの詳細については、テンプレートをつくるを参照してください。