HTML Living Standard/is属性

is属性

is属性は、組み込みHTML要素をカスタム要素として拡張する際に使用するグローバル属性です。この属性は、カスタム要素としての振る舞いを指定するために利用されます。主に、Web Componentsの一部であるカスタム要素の仕様と組み合わせて使用されます。

基本構文

<element is="custom-element-name"></element>

• element: 拡張する組み込み要素（例: button, inputなど）。
• custom-element-name: 登録されたカスタム要素の名前（必ずハイフンを含む名前である必要があります）。

使用例

以下は、is属性を使用して組み込み要素を拡張する例です。

カスタム要素の定義

class MyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      alert('カスタムボタンがクリックされました!');
    });
  }
}

// カスタム要素として登録
customElements.define('my-button', MyButton, { extends: 'button' });

HTMLでの使用

<button is="my-button">カスタムボタン</button>

この例では、標準のbutton要素が拡張され、クリック時にアラートが表示されるカスタム要素として動作します。

動作の概要

• 組み込み要素の拡張:
  • is属性を使用すると、buttonやinputなどの標準HTML要素に独自の機能を追加できます。
• Web Componentsと連携:
  • カスタム要素の登録時にextendsオプションを指定し、既存要素を拡張します。

is属性の利用シーン

• UIコンポーネントの再利用:
  • 標準要素の外観や挙動をカスタマイズして、プロジェクト全体で統一したUIを提供します。
• フォーム要素の拡張:
  • 標準のフォーム要素に追加バリデーションやスタイリングを組み込む際に使用します。
• アクセシビリティの強化:
  • カスタム属性やイベントを追加し、アクセシビリティを向上させます。

注意点

• セキュリティと互換性:
  • 一部のブラウザでは、セキュリティ上の理由からis属性をサポートしていない場合があります。
• ブラウザサポート:
  • is属性を使用したカスタム要素は、最新のブラウザでのみ動作が保証されます。

• 標準HTML要素のみが対象:
  • カスタム要素をさらに拡張することはできません。

互換性

互換性

ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献

• HTML Living Standard - Custom Elements
• MDN Web Docs - is attribute

関連項目

• Web Components
• Shadow DOM
• HTMLのカスタム要素