Web Components を整える。

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

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

Ctrl/⌘ + Enter で実行

PREVIEW

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

CONSOLE

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

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

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

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

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

このページについて

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