Lit が『Web Components の現実解』として支持
LitはGoogle開発のWeb Componentsライブラリで、Web標準（Custom Elements・Shadow DOM・HTML Templates）をベースに、React並みの開発体験を実現します。フレームワーク非依存（React/Vue/Svelteとも併用可能）・小バンドル（5KB）・長期保守性が特徴。Adobe・Cloudflare・SAP等のエンタープライズ採用例があり、デザインシステム・ライブラリ配布の選択肢として2026年定着しました。
採用すべき5つのシグナル
- 複数フレームワーク（React/Vue/Svelte）で再利用するコンポーネントが必要
- デザインシステムを長期保守したい
- フレームワーク選択をユーザに委ねる必要がある
- Web標準ベースで陳腐化リスクを最小化したい
- 軽量（バンドルサイズ重視）コンポーネント
主要機能
- Custom Elements: Web標準のカスタム要素
- Shadow DOM: スコープされたCSS
- Reactive Properties: 状態管理
- Lit Templates: Tagged Template Literalsベース
- Lit Element: TypeScriptフレンドリ
- SSR対応: lit-ssrで静的レンダリング
- Lit Labs: 実験的機能（context・virtualizer等）
React/Vue/Lit比較
React: クライアント主導・大規模アプリ・エコシステム最大。
Vue: 漸進的採用・Composition API・中規模に最適。
Lit: Web標準・フレームワーク非依存・小規模コンポーネント。
Stencil: Lit類似・Ionic等のデザインシステム。
使い分け: SPAはReact/Vue・デザインシステムはLit・ハイブリッドはLit + React。
実装パターン
(1) Custom Element定義: @customElement('my-button')デコレータ
(2) Reactive Property: @property() label = ''
(3) Render: render() { return html<`button>${this.label}</button>` }
(4) Styles: static styles = css`button { ... }`
(5) 使用: HTMLで<my-button label="Hello"></my-button>
本番採用の判断基準
- 本番実績: Adobe・Cloudflare・SAP・Salesforce
- ベンダーロックイン: Web標準ベースで陳腐化リスクなし
- パフォーマンス: 軽量・速い
- 学習コスト: React経験者で1〜2週間
- エコシステム: フレームワーク独立だが規模は小さい
採用しない方が良いケース
- SPA中心の大規模アプリ（React/Vueが向く）
- State管理が複雑（Web Componentsの粒度では限界）
- SSR最優先（Lit SSRはまだ発展途上）
- チームがReact慣れ切っている
実装で詰まる3つの落とし穴
- Shadow DOMのCSS継承: 親スタイルが届かない
- React統合: ref転送・イベント伝播の癖
- SSR制限: Shadow DOMのSSR対応が限定的
30日学習プラン
- 1週目: Lit基礎・Custom Elements・Reactive Properties
- 2週目: Templates・Styles・Event Handling
- 3週目: 複雑なコンポーネント・状態管理
- 4週目: React/Vueとの統合・本番運用
関連リンク
Reactは Reactパフォーマンス、Vueは Vue 3深掘り、Web標準は Web標準実践 を参照してください。Astroとの組み合わせは Astro Content Collections もどうぞ。
