組み込み要素の拡張

仕様では、自律型カスタム要素（HTMLElement を拡張し、<my-card> として使用）と、カスタマイズされた組み込み要素（特定の組み込みクラスを拡張し、<button is="my-button"> として使用）が定義されています。カスタマイズされた組み込み要素は、組み込み要素のセマンティクスをそのまま継承できます。

自律型の <my-button> には、組み込みの <button> の動作が一切ありません。Enter/Space によるアクティベーション、フォームへの参加、支援技術向けの role="button" などが提供されません。カスタマイズされたボタン（is="my-button"）なら、これらすべてを自動的に継承します。

HTMLElement ではなく、特定の HTML クラスを拡張します：class MyButton extends HTMLButtonElement {}。要素はフォーム送信、フォーカス管理、無効状態などの組み込み動作をすべて維持し、その上に独自の拡張を追加できます。

customElements.define("my-button", MyButton, { extends: "button" })。第3引数は、要素が拡張する組み込みタグをレジストリに伝えます。これを指定しないと、登録時に例外が発生します。

既存のタグに is 属性を付けて、カスタマイズされた組み込み要素を使用します：<button is="my-button">Click</button>。代わりに <my-button> と記述すると、自律型要素が作成され、組み込みの動作が失われます。

Safari はアクセシビリティ上の懸念を理由に、カスタマイズされた組み込み要素の実装を拒否しています。Chrome、Edge、Firefox では動作しますが、Safari では is 属性が無視され、要素は通常の <button> として動作します。Safari のサポートが必要な場合は、公式のポリフィルを使用してください。

@ungap/custom-elements ポリフィルを使うと、Safari でカスタマイズされた組み込み要素のサポートを復元できます。小さく、メンテナンスも十分に行われています。is 属性パターンを諦めずにクロスブラウザー対応を行う必要がある場合に組み込んでください。

ポリフィルなしで Safari に対応する必要がある場合は、代わりに自律型要素を作成し、必要な動作を手動で再現してください。role="button"、tabindex="0"、Enter/Space 用のキーボードハンドラーを追加し、ElementInternals API でフォームに関連付けます。

自律型要素は、static formAssociated = true を設定し、this.attachInternals() を使うことでフォーム送信に参加できます。返される ElementInternals オブジェクトには、フォームと完全に統合するための setFormValue と setValidity が用意されています。

組み込み要素に近い動作をするコンポーネント（高機能なボタンやスマートな入力欄）で、プラットフォームが Chrome/Firefox であるか、ポリフィルの使用を許容できる場合は、カスタマイズされた組み込み要素を選んでください。カードやダイアログなど、対応する組み込み要素がないまったく新しいコンポーネントには、自律型要素を選びます。

Web Components で最もよくある間違いは、<my-button> を自律型要素として作成することです。この要素はフォームを送信せず、Enter/Space に応答せず、ボタンとして読み上げられません。HTMLButtonElement を拡張するか、本物のボタンが持つすべての動作を慎重に再現してください。

ボタンのようなコンポーネントで、HTMLElement（自律型）ではなく HTMLButtonElement（カスタマイズされた組み込み要素）を拡張する実用上の利点は何ですか。

カスタマイズされた組み込み要素は、特定の HTML クラス（HTMLButtonElement、HTMLInputElement）を拡張し、is 属性を使って使用します。すべてのネイティブ動作を継承し、{ extends: "button" } オプションで登録します。Safari はネイティブではサポートしていないため、完全なクロスブラウザー対応が必要な場合は、ポリフィルを使うか、手動で動作を再現する自律型要素を使用してください。