用語集 › 🕸️ Web › Custom Elements
【かすたむえれめんつ】

Custom Elements とは？

💡 自分だけの「HTMLタグ」を定義する
📌 このページのポイント
Custom Elements の仕組み 標準HTMLタグ <div> <input> <button> 拡張 カスタム要素 <my-card> 独自のHTML + CSS + JS をカプセル化 Shadow DOM スタイル隔離 DOM隔離 外部に影響しない customElements.define('my-card', MyCard) ブラウザにカスタムタグを登録 ライフサイクル constructor connectedCallback attributeChanged disconnected
Custom Elementsのイメージ
ひよこ ひよこ

Reactのコンポーネントと何が違うの？

ペンギン先生 ペンギン先生

Reactコンポーネントはreact-domに依存していてReactプロジェクト内でしか使えない。Custom Elementsはブラウザ標準APIだからReactでもVueでもSvelteでも、フレームワークなしのHTMLでも使える。デザインシステムのコンポーネントをCustom Elementsで作れば、全プロジェクトで共有できるんだよ

ひよこ ひよこ

どうやって作るの？

ペンギン先生 ペンギン先生

class MyComponent extends HTMLElement { connectedCallback() { this.innerHTML = '

Hello!

'; } } で定義して、customElements.define('my-component', MyComponent)で登録。あとはでHTMLに書ける。タグ名にはハイフンが必須（既存タグとの衝突を防ぐため）だよ

ひよこ ひよこ

ライフサイクルは？

ペンギン先生 ペンギン先生

4つのコールバックがある。①connectedCallback：DOMに追加された時（初期化処理）、②disconnectedCallback：DOMから削除された時（クリーンアップ）、③attributeChangedCallback：属性が変更された時（リアクティブ更新）、④adoptedCallback：別のドキュメントに移動した時（iframe間の移動等）。observedAttributesで監視する属性を静的プロパティで宣言するよ

ひよこ ひよこ

実務で使うライブラリは？

ペンギン先生 ペンギン先生

Lit（Google製）がCustom Elements開発のデファクト。デコレーターでリアクティブプロパティを簡潔に定義でき、テンプレートはhtml tagged templateで書く。StencilJS（Ionic製）はTypeScript+JSXでCustom Elementsを作れる。どちらもビルドして配布すればフレームワーク問わず使えるよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Custom Elements」って出てきたら「独自のHTMLタグを定義するWeb標準API」と思えればだいたいOK！
📖 おまけ：英語の意味
「Custom Elements」 ＝ カスタム要素
💬 Custom（独自の）Elements（要素）。HTMLの標準タグと同じように使える独自タグだよ
🔗 あわせて読みたい
← 用語集にもどる