Lit を整える。

そもそも Lit とは

Web 標準の部品づくりを、ぐっと書きやすくする小さな道具。

どこで・どんな場面で使うか

• 会社やサービスで共通のボタン・入力部品を作るとき

  ロゴや色をそろえた部品を一度作れば、別々の技術で作られた複数のサイトでも同じタグで使い回せます。

• 管理画面にウィジェットを埋め込むとき

  既存のページの一部だけを部品にして足せるので、画面全体を作り替える必要がありません。

• 複数のチームが別の技術で開発している組織

  部品がブラウザ標準なので、React のチームも Vue のチームも同じ部品を使えます。

• お問い合わせフォームや計算機などの小さな道具

  外のページに貼り付けて使う小さな部品は、軽くて他に影響しにくい作りが向いています。

• Web Components を学ぶとき

  標準のままだと書く量が多いので、Lit を通すと「標準の仕組み＋少しの便利機能」という全体像がつかみやすくなります。

向いている場面・向いていない場面

• 向いている：部品を複数の場所で使い回したいとき。技術が混在するサイトや、長く使う共通部品に合います。
• 向いている：軽く始めたいとき。小さなライブラリなので、画面の一部だけに足せます。
• 向いていない：画面全体をまとめて作る大きなアプリ。ルーティングや状態管理を全部そろえたい場合は、React や Vue など、はじめから揃っている道具のほうが楽なことがあります。

上の練習場でサンプルを動かし、値を変えると部品がどう描き直されるか確かめてみてください。

理由

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 から取得します。 これはプログラムを受け取るだけの通信で、書いたコードや実行結果が送られることはありません。