is属性

is属性とは

isは、要素をカスタマイズする時に指定する名前を記述します。マスタマイズすることで、要素の挙動や表示を変えることができます。

カスタマイズされた要素は、カスタム要素と呼ばれます。カスタム要素には、以下があります。

自律カスタム要素

標準にない新規で作成する要素です。

カスタマイズドビルトイン要素

標準の要素(例えばp要素)をカスタマイズした要素です。

isで指定するのは、カスタマイズドビルトイン要素の識別名です。識別名には、ハイフン(-)が含まれる必要があります。

isはグローバル属性のため、すべてのHTML要素で使えます。

利用例

isの利用例は、以下のとおりです。

<script>
class Dice extends HTMLParagraphElement {
  constructor() {
    super();
    let x = Math.ceil( Math.random() * 6 );
    this.textContent = x + this.textContent;
  }
}

customElements.define('dice-p', Dice, { extends: "p" });
</script>

<p is="dice-p">テストです。</p>

赤字部分で、is属性を使っています。青字部分が、要素のカスタマイズです。dice-pが、isで指定する名前と一致しています。また、extendsでp要素の拡張であることを示しています。カスタマイズ内容は、緑字部分で作っています。

実行例

実行例は、以下のとおりです。

「テストです。」の前に、数字が表示されていると思います。これはp要素をカスタマイズして、1〜6のランダムな数字を表示するようにしているためです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。