Webフロントエンド - 基礎

Custom Elements かすたむえれめんつ

Web Componentsカスタム要素Shadow DOMHTML要素JavaScriptコンポーネント

Custom Elementsについて教えて

簡単に言うとこんな感じ！

HTMLって <div> や <p> みたいなタグが決まってるよね。Custom Elementsはそれを自分で作れる仕組みなんだ！たとえば <my-button> とか <user-card> みたいな独自タグを定義して、ブラウザに「これはこういう動きをするやつ！」って登録できるってこと！

Custom Elementsとは

Custom Elements（カスタム要素） とは、開発者がオリジナルのHTMLタグを定義・作成できるWeb標準の仕組みです。通常、HTMLには <div>・<input>・<video> など、ブラウザが最初から知っている要素しか使えません。しかしCustom Elementsを使うと、<my-modal> や <product-card> のような意味のある独自タグを定義し、ネイティブのHTML要素と同じように扱えるようになります。

Custom Elementsは Web Components と呼ばれる一連の技術仕様のコア部分を担っています。Web ComponentsはCustom Elements・Shadow DOM・HTML Templatesの3つで構成されており、これらを組み合わせることで、フレームワーク（ReactやVueなど）に依存しない再利用可能なUIコンポーネントを作ることができます。ビジネス上の価値としては「一度作ったUIパーツをどんなシステムでも使い回せる」という点で、発注・調達するシステムのフロントエンド技術が何であっても動作するという強みがあります。

Custom Elementsの仕組みと種類

Custom Elementsには大きく2種類あります。

種類	説明	タグ例
Autonomous custom elements（自律型）	全く新しい要素を定義する。`HTMLElement` を継承して作る	`<my-button>`
Customized built-in elements（組み込み拡張型）	既存のHTML要素を拡張して機能を追加する。`is=""` 属性で使う	`<button is="my-button">`

ライフサイクルコールバック（覚え方）

Custom Elementsには「要素の一生」に対応した4つのコールバック（自動で呼ばれる関数）があります。「接・切・移・変」（せつ・きり・うつ・かわ）と覚えると整理しやすいです。

コールバック名	略称	呼ばれるタイミング
`connectedCallback`	接続	要素がDOMに追加されたとき
`disconnectedCallback`	切断	要素がDOMから削除されたとき
`adoptedCallback`	移動	別のdocumentに移されたとき
`attributeChangedCallback`	変更	監視対象の属性が変わったとき

基本的なコードの構造

// 1. クラスを定義してHTMLElementを継承
class MyCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello, ${this.getAttribute('name')}!</p>`;
  }
}

// 2. ブラウザに「このタグ名でこのクラスを使う」と登録
customElements.define('my-card', MyCard);

<!-- 3. HTMLで普通のタグとして使う -->
<my-card name="田中さん"></my-card>

ポイント： カスタム要素のタグ名には必ず ハイフン（-）を含める ルールがあります。mycard はNG、my-card はOKです。これにより将来のHTML標準タグと衝突しないよう設計されています。

歴史と背景

2011年 — Google のエンジニアが “Web Components” のコンセプトを提唱。HTMLの再利用性の低さを問題視
2013年 — Chrome が Web Components の初期実装を実験的に搭載。document.registerElement() というAPIが先行実装される
2016年 — 仕様が大幅に改訂され、customElements.define() を使う Custom Elements v1 仕様がまとまる
2018年〜2019年 — Chrome・Safari・Firefox が Custom Elements v1 をサポート。主要ブラウザで利用可能に
2020年代〜 — Google の Lit など Custom Elements を活用したライブラリが普及。大企業のデザインシステム（例: GitHub、Adobe Spectrum）での採用が加速

ReactやVueとの違い・関係

Custom ElementsはReactやVueと「競合」するものではなく、より低レイヤーのブラウザ標準です。関係を整理するとこうなります。

フレームワークとの比較まとめ

観点	Custom Elements	React / Vue
動作環境	ブラウザネイティブ（JS不要で動作する場面も）	JavaScriptランタイム必須
学習コスト	低〜中（Web標準を学ぶ感覚）	中〜高（フレームワーク固有の概念あり）
再利用性	どのフレームワークでも使える	基本的に同フレームワーク内
エコシステム	比較的小さい	非常に大きい（ライブラリが豊富）
向いている用途	デザインシステム・UIライブラリ	アプリケーション開発全般

規格	内容
WHATWG HTML Living Standard - Custom elements	Custom Elementsの正式仕様。WHATWGが管理するHTML標準
W3C Web Components	Web Componentsの全体像を定義したW3C文書
DOM Living Standard	Custom ElementsのDOM統合部分の仕様（WHATWG管理）