Contents
customElements.define()の実装フローとライフサイクル管理
カスタム要素を作成するにはcustomElements.define()メソッドを使用します。このメソッドにより、ブラウザが独自の要素名で認識できるよう登録できます。以下に手順を示します。
define()メソッドの使用方法
- 要素名とクラスを指定して定義する
- ライフサイクルコールバックや属性処理を実装
|
1 2 3 4 5 6 |
customElements.define('my-element', class extends HTMLElement { connectedCallback() { this.textContent = 'カスタム要素がDOMに追加されました'; } }); |
ライフサイクルコールバックの役割
以下は、要素の挙動を制御するためにオーバーライド可能なメソッドです。
| メソッド名 | 呼び出されるタイミング | 用途例 |
|---|---|---|
connectedCallback() |
DOMに追加されたとき | 初期化処理、イベントリスナ登録 |
disconnectedCallback() |
DOMから削除されたとき | リソースの解放 |
adoptedCallback() |
要素が別のDocumentに移動したとき | セッションデータの再設定 |
以下はadoptedCallback()を使用した実装例です。
|
1 2 3 4 5 6 7 |
class MyElement extends HTMLElement { adoptedCallback(oldDoc, newDoc) { console.log(`要素が${oldDoc}から${newDoc}へ移動しました`); // データを再初期化する処理 } } |
カスタム属性処理とリアクティブデータバインディング
カスタム要素では、attributeChangedCallback()を使って属性変更を検知し、UIを更新できます。これにより、プロパティと属性の同期が可能になります。
attributeChangedCallbackの実装例
監視する属性名をobservedAttributes()で指定します。
|
1 2 3 4 5 6 7 8 9 |
static get observedAttributes() { return ['text', 'color']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'text') this.textContent = newValue; if (name === 'color') this.style.color = newValue; } |
プロパティ-属性同期の実装
プロパティと属性を同期するには、ゲッター・セッターを使用します。
|
1 2 3 4 5 6 7 8 9 |
set text(value) { this.setAttribute('text', value); this.textContent = value; } get text() { return this.getAttribute('text') || ''; } |
注意：
this._tasks変数はTodoListクラスのコンストラクタで初期化されていることを確認してください。
ブラウザ互換性対策とPolyfillの実装
Web Componentsのサポート状況はブラウザごとに異なります。2026年以降は多くのブラウザが完全対応する見込みですが、一部ではPolyfillが必要です。
主要ブラウザのサポート状況
| ブラウザ | サポート状況 | 備考 |
|---|---|---|
| Chrome | 完全対応 | 2026年以降、Shadow DOM v1が標準化 |
| Safari | 部分対応（Polyfill推奨） | iOS 14以降で改善 |
| Firefox | 完全対応 | JS APIは最新版に準拠 |
注意：Safariでは現時点で完全対応ではないため、Polyfillの導入が推奨されます。
Polyfillの導入手順
- CDN経由で読み込む方法
|
1 2 |
<script src="https://unpkg.com/webcomponentsjs@latest/webcomponents-bundle.js"></script> |
- npmでインストールする方法（Nodeプロジェクトの場合）
|
1 2 |
npm install webcomponentsjs |
実践例：Todoアプリケーションでのコンポーネント構築
Web Componentsの強みを体感するには、Todoリストアプリが適しています。以下に簡易な実装例を示します。
UI要素の分割設計
todo-item：個別のタスク表示用コンポーネントtodo-list：タスク一覧を管理するコンテナ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// todo-item.js class TodoItem extends HTMLElement { static get observedAttributes() { return ['task', 'completed']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'task') this.textContent = newValue; if (name === 'completed') { this.style.textDecoration = newValue ? 'line-through' : 'none'; } } } customElements.define('todo-item', TodoItem); // todo-list.js class TodoList extends HTMLElement { constructor() { super(); this._tasks = []; } addTask(task) { const item = document.createElement('todo-item'); item.setAttribute('task', task); this.appendChild(item); this._tasks.push(task); } } customElements.define('todo-list', TodoList); |
イベントハンドリングの実装
HTML側では以下のように要素を呼び出します。
|
1 2 3 4 5 6 7 8 9 10 |
<todo-list id="list"></todo-list> <button onclick="addTask()">タスク追加</button> <script> function addTask() { const task = prompt('タスク名を入力してください'); if (task) document.getElementById('list').addTask(task); } </script> |
無料ダウンロード：Web Componentsテンプレートパッケージ
Web Componentsの開発効率向上には、テンプレートパッケージが不可欠です。以下の内容を含む無料パッケージをご用意しました。
- ライフサイクルコールバックサンプルコード
- カスタム属性処理基盤クラス
- テストスクリプトとPolyfill設定
無料ダウンロードはこちら（※リンクは運用側で設置）
まとめ
2026年のWeb Components技術の最新動向を踏まえて、カスタム要素の実装手順を解説しました。重要なポイントを以下にまとめておきます。
- Shadow DOM/Custom Elementsの3要素によるUI構築
customElements.define()とライフサイクルコールバックの活用- 属性変更検知とリアクティブデータバインディングの実装方法
- ブラウザごとのサポート状況とPolyfill導入法
独自のコンポーネント開発は、本記事で紹介した知識を基に効率的かつ信頼性高く進めましょう。