Web Components を整える。

＝ライブラリなしで独自の HTML タグを作って動かす練習場

Web Components が初めての方は、先にそもそも Web Components とは・どんな場面で使うかをどうぞ。

サンプルコード（クリックでエディタに挿入）

Ctrl/⌘ + Enter で実行

PREVIEW

「▶ 実行」を押すと、ここに描画結果が表示されます。

コンソール

console.log の出力とエラーがここに出ます。

HTMLタブが「使う側」（実際に画面に置くタグ）、JSタブが「コンポーネントの定義」です。無限ループを書くとプレビューが固まることがあります。そのときは「■ 停止」を押してください。

そもそも Web Components とは

ライブラリではなく、ブラウザに最初から入っている「自作タグ」の仕組み。

Web Components は、自分で決めた名前の HTML タグ（例: <my-button>）を作るための、Web 標準の仕組みの総称です。Custom Elements（自作タグ）、Shadow DOM（内側のスタイルを守る仕組み）、template（ひな形）といった機能の組み合わせでできています。

特定の会社のライブラリではなく、ブラウザそのものが持つ機能なので、追加のインストールなしで動き、React や Vue と一緒にも使えます。標準のままだと書く量が多いため、Lit のような補助のライブラリを重ねて使う人も多くいます。

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

どのサイトでも使い回す共通部品

ボタンや入力欄を一度作れば、どんな技術のサイトにもタグ1つで置けます。
他社サイトに埋め込む部品

地図・チャット・予約欄などを、外のページの見た目に影響されずに置くのに向いています。
デザインシステム（部品集）

会社全体で見た目をそろえるための部品集に、標準の部品として使われます。
技術が混在した大きな組織

チームごとに使う道具が違っても、同じ部品を共有できます。
Web の基本を学ぶとき

フレームワークの下にある、ブラウザ標準の考え方を知る足がかりになります。

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

向いている：長く使える共通部品。流行の道具が変わっても、ブラウザ標準なので動き続けやすい作りです。
向いている：見た目を他から守りたい部品。Shadow DOM のおかげで、外のスタイルと内側が混ざりにくくなります。
向いていない：画面全体を管理する大きなアプリ。ルーティングや状態の管理まで必要なら、フレームワークのほうが揃っていて楽です。

上の練習場でサンプルを動かし、自作タグを書き換えて、表示がどう変わるか試してみてください。

Web Components は「定義・属性・slot・イベント」の4点セット。

どれもブラウザ標準の customElements と Shadow DOM の機能で、ライブラリなしで書けます。

①

定義と描画 — class extends HTMLElement

connectedCallback() は要素が画面に現れたときに呼ばれます。ここで attachShadow() して Shadow DOM を作り、中身を描きます。
②

属性 — observedAttributes・attributeChangedCallback

static observedAttributes に列挙した属性だけが監視対象になり、変化するたびに attributeChangedCallback が呼ばれて再描画できます。
③

slot — 名前付き slot と ::slotted

使う側が渡した子要素を、<slot name="..."> で決まった場所に差し込みます。::slotted() は、差し込まれた要素だけをスタイルできる特別なセレクタです。
④

イベント — CustomEvent と composed

内部の状態が変わったことは dispatchEvent(new CustomEvent(...)) で外側に伝えます。Shadow DOM の外まで届けるには composed: true が必要です。

Lit は、この Web Components を書きやすくする薄い層。

Lit はここで書いた customElements・Shadow DOM の上に、状態管理・再描画・テンプレート記法を足すだけのライブラリです。

観点	Web Components（素）	Lit
要素の登録	customElements.define（同じ）	customElements.define（同じ）
再描画	自分で render() を呼び直す	プロパティが変わると自動で呼ばれる
テンプレート	innerHTML に文字列を組み立てる	html`` タグ付きテンプレートで書く
依存ライブラリ	無し	lit（軽量）

ここで書いたコードがそのまま動くのは、Lit も内部で customElements と Shadow DOM を使っているからです。 Lit での書き方は /lit/ の Playground で確認できます。

Shadow DOM の CSS 隔離・ブラウザ対応

Shadow DOM の内側に書いた <style> は、外側のページの CSS の影響を受けません。逆に、外側のページに p { color: red; } と書いても、Shadow DOM の中の <p> には効きません。
この「隔離」のおかげで、社内の別チームが作った部品を貼り付けても、お互いの CSS が衝突しません。
Custom Elements v1 と Shadow DOM v1 は、Chrome・Edge・Firefox・Safari の最新版に標準搭載されています（ポリフィル不要）。

このページについて

ここで動くのは本物のブラウザのエンジンです。外部ライブラリは読み込みません。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。