---
title: "Litとは？lit-htmlとLitElementの違い・使い方とSSR・React連携【Lit 3.3対応】"
url: "https://www.issoh.co.jp/tech/details/5997/"
published: 2025-03-25
updated: 2026-09-28
categories: ["JavaScript"]
publisher: "株式会社一創"
---
# Litとは？lit-htmlとLitElementの違い・使い方とSSR・React連携【Lit 3.3対応】
Litは、Web標準のWeb Componentsを少ないコードで作るためのJavaScriptライブラリです。テンプレートを描画する`lit-html`と、コンポーネントの基底クラスである`LitElement`を`lit`という1つのパッケージにまとめて配布しており、[公式サイト](https://lit.dev/)は本体の大きさを「約5KB（minified and compressed）」と公表しています。
この記事では、2026年5月14日公開の最新版3.3.3を前提に、lit-htmlとLitElementの関係、テンプレートの書き方、TypeScriptやCDNでの使い方、SSR、Reactとの組み合わせまでを、node v26.5.0で動作を確かめたコードで説明します。2025年10月にGoogle単独の管理からOpenJS Foundationへ移った経緯にも触れます。
## まとめ：Litとlit-htmlの要点
- **構成**：npmの`lit`（3.3.3）は`lit-html`（3.3.3）・`lit-element`（4.2.2）・`@lit/reactive-element`（2.1.2）を束ねたパッケージ。新規に入れるのは`lit`だけでよい。
- **lit-html**：タグ付きテンプレートリテラル`` html`...` ``でUIを書き、再描画では値の入る箇所だけを書き換える。仮想DOMの差分計算はしない。
- **LitElement**：リアクティブなプロパティとShadow DOM内のスコープ付きスタイルを持つカスタム要素の基底クラス。作った部品はReact・Vue・Angularやフレームワーク無しのHTMLでもそのまま使える。
- **運営**：Polymer Projectとして始まり、長くGoogleが開発してきたが、2025年10月14日にOpenJS FoundationのImpact Projectへ移管された。ライセンスはBSD-3-Clause。
- **注意点**：SSRは`@lit-labs/ssr`（Labs扱い）で、非同期処理とShadow DOMを使わないコンポーネントには未対応。JavaScriptではリアクティブなプロパティをクラスフィールドで初期化してはいけない。
## Litを構成する3つのパッケージと版の履歴
「lit-html」「LitElement」「Lit」の3つの名前が混在するのは、歴史的に別々のライブラリだったものを2021年のLit 2で1つに統合したためです。現在も各パッケージはnpmに個別に公開されており、`lit`はそれらを依存として読み込む入り口にあたります。
### lit-html・LitElement・litの役割分担
| パッケージ | 最新版 | 役割 |
| ----------------------- | ----- | ---------------------- |
| `lit` | 3.3.3 | 下の3つをまとめて再公開する入り口 |
| `lit-html` | 3.3.3 | テンプレートの記述と描画 |
| `lit-element` | 4.2.2 | LitElement（描画付きの基底クラス） |
| `@lit/reactive-element` | 2.1.2 | プロパティ変更で更新を予約する土台 |
版番号がそろっていない点に注意してください。`lit`の3.3.3は`lit-html` ^3.3.0・`lit-element` ^4.2.0・`@lit/reactive-element` ^2.1.0に依存しており、「LitElement 4」と「Lit 3」は同じ世代を指します。古い記事の`import {LitElement} from 'lit-element'`は今も動きますが、新規コードは`from 'lit'`に統一するのが公式の書き方です。`lit-html`は非推奨になっておらず、コンポーネントを作らずテンプレートだけ使いたい場合は単体で入れられます。
### Polymerから始まった版の履歴とOpenJS Foundationへの移管
| 日付 | 出来事 |
| ---------- | ------------------------------------------------ |
| 2019-02-05 | lit-html 1.0とLitElement 2.0の安定版（Polymer Project） |
| 2021-09-21 | Lit 2.0。2つを`lit`パッケージへ統合 |
| 2023-10-10 | Lit 3.0。IE11サポートを終了 |
| 2025-10-14 | OpenJS FoundationのImpact Projectへ移管 |
| 2026-05-14 | Lit 3.3.3（執筆時点の最新） |
「Googleのフレームワーク」と紹介されることが多いものの、公式ブログの[移管告知](https://lit.dev/blog/2025-10-14-openjs/)には、コード・ドキュメント・Webサイト・Litのブランドを含む全資産をOpenJS Foundationへ移し、特定企業に将来を依存しない体制にすると書かれています。発足時の技術運営委員会（TSC）はGoogle所属2名、Adobe・Reddit所属各1名、独立の開発者2名で構成されています。同じ告知では、利用例としてAdobeのPhotoshop・IllustratorのWeb版、Reddit、MDN、Chrome DevTools、FirefoxのブラウザUIが挙げられています。採用の判断で「Google次第で終わるのでは」という点を気にしていたなら、その前提は2025年10月で変わりました。
## lit-htmlのテンプレート構文と差分更新の仕組み
### html関数とrenderで動く最小のテンプレート
lit-htmlの中心は、テンプレートを作る`html`タグ関数と、それをDOMへ書き出す`render`関数の2つです。
```
import {html, render} from 'lit-html';
const greet = (name, n) => html`こんにちは、${name}さん（${n}件）
`;
render(greet('Lit', 3), document.body);
render(greet('Lit', 4), document.body); // 2回目は「3」の部分だけが書き換わる
```
このテンプレートを`@lit-labs/ssr`で文字列に描画すると、次のように値が入る場所ごとに`lit-part`という目印のコメントが付きます。
```
こんにちは、Litさん（3件）
```
lit-htmlは初回描画で固定部分と可変部分を切り分けて覚えておき、2回目以降は可変部分の値だけを前回と比べます。公式サイトの表現では「UIの動的な部分にしか触れないため、仮想ツリーを作り直してDOMと差分を取る必要がない」仕組みで、Reactの仮想DOMとの一番大きな違いです。
### バインディング記法5種類の使い分け
値の入れ先は、属性名の前に付ける記号で決まります。
| 書き方 | 入れ先 | 例 |
| -------------- | --------------- | ------------------- |
| `${...}`（要素の中） | 子ノード | `${msg}
` |
| `name=${...}` | 属性（文字列） | `class=${cls}` |
| `?name=${...}` | 真偽属性の付け外し | `?disabled=${busy}` |
| `.name=${...}` | JavaScriptプロパティ | `.value=${text}` |
| `@name=${...}` | イベントリスナー | `@click=${onClick}` |
配列やオブジェクトを子コンポーネントへ渡すときは、属性ではなく`.`付きのプロパティで渡します。HTMLの属性は大文字小文字を区別しませんが、`.listItems=${items}`のようなプロパティ名は大文字小文字がそのまま保たれます。繰り返し・条件分岐・クラスの付け外しなどは、`repeat`・`when`・`classMap`・`styleMap`・描画後の要素を参照する`ref`といった組み込みディレクティブで書けます（`lit/directives/ref.js`のように個別にimportします）。
## LitElementでWeb Componentsを作る手順
### npmでのLit導入とカスタム要素の登録
既存のnpmプロジェクトには`npm i lit`で追加できます。以下のコードをcounter.jsとして保存し、Viteなどでベアモジュール指定子を解決できる環境から、HTMLのmoduleスクリプトとして読み込みます。次はクリックで数が増えるボタンを、デコレーターを使わない素のJavaScriptで書いた例です。
```
import {LitElement, html, css} from 'lit';
export class CounterButton extends LitElement {
static properties = {
count: {type: Number},
label: {type: String},
};
static styles = css`
button { font: inherit; padding: 4px 12px; }
`;
constructor() {
super();
this.count = 0; // 初期値はconstructorで入れる
this.label = '回';
}
render() {
return html`
`;
}
}
customElements.define('counter-button', CounterButton);
```
HTML側では``と書くだけで使えます。`static properties`に宣言したプロパティは値が変わると更新が非同期に予約され、同じタイミングで複数が変わっても描画は1回にまとめられます。`type: Number`の指定により、属性の文字列「3」は数値の3に変換されます。
### TypeScriptのデコレーターとaccessor
TypeScriptでは`@customElement`・`@property`・`@state`・`@query`などのデコレーターを`lit/decorators.js`から読み込めます。Litは旧来の実験的デコレーターとECMAScript標準のデコレーターの両方に対応しており、標準デコレーターではフィールドに`accessor`を付けます。
```
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('user-card')
export class UserCard extends LitElement {
@property({type: String}) accessor name = '';
@property({type: Boolean, reflect: true}) accessor active = false;
render() {
return html`${this.name}
`;
}
}
```
この例は`experimentalDecorators`を指定しない設定（target ES2022）のTypeScript 5.9.3でコンパイルでき、``を描画すると「佐藤」が表示されました。`reflect: true`はプロパティの変更を属性へ書き戻す指定で、CSSの属性セレクターでスタイルを切り替えたいときに使います。
公式ドキュメントは、コンパイル結果の効率を理由に、現時点では実験的デコレーターを推奨しています。その場合は`"experimentalDecorators": true`と`"useDefineForClassFields": false`を組み合わせます。標準デコレーターの型にはTypeScript 5.2以上が必要で、Babelで変換する場合は標準デコレーター（`accessor`付き）しか使えません。
### CDNからビルドなしで読み込む方法
公式は単一ファイルのバンドルも配布しており、npmやビルドツールを使わずに試せます。
```
```
npmで入れた`lit`をビルドせずにブラウザへ渡すと、`import {html} from 'lit-html'`のような「ベアモジュール指定子」を解決できずに止まります。Vite・webpack・Rollup（`@rollup/plugin-node-resolve`が必要）でバンドルするか、import mapsで対応表を与えるかのどちらかが必要で、CDN版はこの手間を省いた形です。
## Shadow DOMでのスタイルのスコープと外から効かせる方法
LitElementは既定でopenなShadow Rootを作り、その中へ描画します。`static styles`に書いたCSSは原則としてShadow DOM内にスコープされます。ただし、外側で指定したcolorやfont-familyなどの継承プロパティは内部にも継承されます。部品同士のクラス名の衝突を防げる反面、ページ側のセレクターでShadow DOM内の要素を直接指定しようとしても適用されません。仕組みそのものは[Shadow DOMとは？カプセル化の仕組みとopen/closedの違いを実装例で解説](/tech/details/5426/)で扱っています。
外部からの調整にはCSSカスタムプロパティや、part属性で公開した内部要素を指定する`::part()`があります。以下では、コンポーネント側のスタイル指定とLight DOMへの切り替えも含めて整理します。
- **CSSカスタムプロパティ**：`--brand-color`のような変数は継承されてShadow DOMの内側まで届く。テーマの色や余白を外から差し替える正攻法。
- **::slotted()と:host（コンポーネント側）**：`static styles`の中から、``に差し込まれた子要素やホスト要素自体を指定する。外側のスタイルで上書きできるので、既定値として書く。
- **Light DOMへの描画**：`createRenderRoot()`で`this`を返すとShadow DOMを使わずに描画する。ページのCSSがそのまま効くが、スタイルのスコープと``は使えなくなる。
Tailwind CSSのようにページ全体へ出力するユーティリティCSSは、そのままではShadow DOM内に効きません。Litと組み合わせるなら、生成したCSSを`unsafeCSS`で`static styles`へ取り込むか、上のLight DOM描画に切り替えるかを決めてから設計します。Tailwind側の版ごとの変更は[Tailwind CSS v3とv4の違い｜破壊的変更と移行手順をv4.3.3の実ビルドで検証](/tech/details/5060/)を参照してください。
## LitのSSRとハイドレーションの現状
サーバー側でLitコンポーネントをHTMLにするには`@lit-labs/ssr`（4.1.0）を使います。パッケージ名のとおり実験段階のLabs扱いで、ブラウザのDOMを丸ごと再現せず、テンプレートの宣言的な構造を使って文字列を組み立てる仕組みです。先ほどのcounter.jsと同じディレクトリで`npm i @lit-labs/ssr`を実行し、package.jsonに`"type": "module"`を設定します。次のコードをssr.jsとして保存し、`node ssr.js`で実行すると、出力例のHTMLが得られます。
```
import {render} from '@lit-labs/ssr';
import {collectResultSync} from '@lit-labs/ssr/lib/render-result.js';
import {html} from 'lit';
import './counter.js';
console.log(collectResultSync(render(html``)));
// 出力（抜粋）:
//