フレームワークを整える
中級Lit を整える。
＝ ブラウザ標準のカスタム要素にひと工夫足す——タグとして使えるコンポーネントを作る
サンプルコード（クリックでエディタに挿入）
CONSOLE
コードを書いて「実行」を押すと、ここに console 出力とエラーが出ます。
無限ループを書くとタブが固まることがあります。そのときは「■ 停止」を押してください。
Lit が向いている場面／向かない場面
自分に合うのはどれ？ 選び方を見る →ブラウザ標準のWeb Componentsとして書く、フレームワークを問わず混ぜられる部品。
◎ 向いている場面
- ・ブラウザ標準のCustom Elements（Web Components）として作り、他のフレームワークと混ぜて使いたいとき
- ・社内の複数プロジェクト（React/Vue混在）で共通のUI部品を配りたいとき
- ・Shadow DOMでスタイルを完全にカプセル化したいとき
△ 向かない場面
- ・求人量・日本語情報の多さを重視するとき（当サイト内では最も手薄）
- ・とにかく学習コストを抑えたいとき（Web Components自体の概念理解が要る）
Lit は「ブラウザ標準のカスタム要素」に仕組みを足すだけ。
React や Vue のような独自の仮想 DOM 全体を持ち込むのではなく、customElements という Web 標準の上に、状態管理・再描画・イベントの薄い層を重ねています。
- ①
customElements.define — 要素を「タグ」として登録する
LitElementを継承したクラスを、ハイフンを含むタグ名（例:hello-element）で登録すると、普通の HTML タグと同じように使えるようになります。 - ②
static properties — 変わると再描画される値
static propertiesに宣言した値は「リアクティブプロパティ」になり、変更するたびにrender()が呼び直されます。 - ③
dispatchEvent — 外側にイベントで知らせる
内部の状態が変わったことを親に伝えるときは、props の callback ではなく
CustomEventをdispatchEventするのが Web Components らしいやり方です。
このページについて
ライブラリは cdn.jsdelivr.net から読み込みます。
書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
🌐 「実行」を押した最初の1回だけ、Lit 3.3.3 を配信元の
cdn.jsdelivr.net から取得します。
これはプログラムを受け取るだけの通信で、書いたコードや実行結果が送られることはありません。
このツールについて
Lit は「ブラウザ標準のカスタム要素」に、状態・再描画・イベントの仕組みを足す軽量なライブラリです。ここでは実際に要素を定義して登録し、画面と console の両方で挙動を確認できます。
ブラウザ内 Lit 3 で カスタム要素の定義・プロパティとイベント・繰り返し描画を体験。customElements.define で登録した要素が普通の HTML タグのように動く様子を確認できます。
主な機能
- 3サンプル（カスタム要素の定義・プロパティとイベント・繰り返し描画）
- iframe 内で lit の ESM を直接 import（親側のコンパイル不要）
- プレビュー＋console・停止ボタン
- lit は cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. 入力したコードはサーバーに送られますか？
A. 送られません。Lit の実行はすべてブラウザ内のサンドボックス iframe で完結し、外へ出る通信は Lit 本体のダウンロード（初回のみ）だけです。
Q. customElements.define で登録した要素はどこで使えますか？
A. このプレビュー iframe の中だけです。登録後は普通の HTML タグとして使えます。
Q. static properties の値を変えると何が起きますか？
A. リアクティブなプロパティとして扱われ、変更のたびに render() が呼び直されて画面が更新されます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
