Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。
Web Components Limited support

Customized built-in elements

カスタマイズされた組み込み要素は既存のHTML要素（button, p など）を extends で拡張し、is 属性で使用します。

Web Components

概要

カスタマイズされた組み込み要素は既存のHTML要素（button, p など）を extends で拡張し、is 属性で使用します。

対応ブラウザ

デスクトップ

Chrome 67+
Edge 79+
Safari 未対応
Firefox 63+

モバイル

Chrome Android 67+
Safari iOS 未対応
Firefox Android 63+

基本構文

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">クリック</button>

実務での使いどころ

  • Customized built-in elements の活用

    カスタマイズされた組み込み要素。既存のHTML要素を拡張するカスタム要素。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク