Customized built-in elements
メモ: Safari はカスタム組み込み要素に対応する予定はなく、ブラウザーベンダーは組み込み要素のカスタマイズに関する代替ソリューションを検討しています。対応情報については、ブラウザーの互換性の節で調べてください。
is グローバル属性で、標準の HTML 要素が定義されたカスタム組み込み要素のように振る舞うよう指定することができます（詳しくはカスタム要素の使用を参照してください）。
この属性は、指定されたカスタム要素名が現在の文書で正常に定義され、適用されている要素型が拡張されている場合にのみ使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 67 | 79 | 63 | | 67 | | |
| DOM API | ||||||
| カスタマイズされた内蔵エレメントのサポート | 67 | 79 | 63 | | 67 | |
基本構文
HTML
class FancyButton extends HTMLButtonElement {
constructor() {
super();
this.style.background = 'linear-gradient(#66f, #33c)';
this.style.color = '#fff';
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });
// <button is="fancy-button">Click</button>ライブデモ
実務での使いどころ
-
Customized built-in elements の活用
メモ:
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。