is=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

is属性は、要素にカスタム要素名を指定します。

この属性を指定することで、要素とカスタム要素の定義が関連付けられることになり、標準のHTML要素に対して拡張機能を追加できるようになります。


<button is="custom-button">カスタムボタン</button>
属性 値
グローバル属性
is="" カスタム要素の名前 文字列 カスタム要素を識別するための名前（ハイフンが必要）

次の例では、example-button というカスタム要素名によって、カスタム要素の定義とbutton要素とを関連付けています。

この場合、is="example-button" が指定されたbutton要素には、アラートを表示する機能が追加されることになります。

<script>

   class ExampleButton extends HTMLButtonElement {
      constructor() {
         super();

         // ここに拡張機能を記述する
         this.addEventListener('click', () => {
            alert('テストOK');
         });

      }
   }
   customElements.define('example-button', ExampleButton, { extends: 'button' });

</script>

<p><button is="example-button">テストボタン</button></p>

上記コードの実際の表示例は次のようになります。

  • 上記のように、標準のHTML要素を拡張するカスタム要素のことをカスタマイズされた組み込み要素（customized built-in element）と言います。
  • 余談ですが、slot要素のページで使用しているカスタム要素は自律カスタム要素（autonomous custom element）と言います。（自律カスタム要素に対してはis属性は指定できません）

指定できる要素

is属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML LS：is属性が定義されました。

使用例

アラートを表示するカスタム要素と関連付けた例

<script>

   class AlertButton extends HTMLInputElement {
      constructor() {
         super();

         // ここに拡張機能を記述する
         this.addEventListener('click', () => {
            alert('テストOK');
         });

      }
   }
   customElements.define('alert-button', AlertButton, { extends: 'input' });

</script>

<p><input type="button" value="テストボタン" is="alert-button"></p>
表示例