【HTML Living Standard】is属性の使い方

is属性の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月27日

基本的な使い方

isプロパティは、標準のHTML要素にカスタム要素の機能を拡張するための情報を保持するプロパティです。このグローバル属性は、Web Components仕様の一部である「カスタマイズされた組み込み要素」を定義する際に利用されます。

isプロパティを使用することで、既存のHTML要素、例えば<button>や<p>、<ul>などに対し、独自の振る舞いや機能を持つカスタム要素の名前を指定し、それを適用することができます。具体的には、<button is="my-custom-button">のように記述することで、その要素は通常のボタンとしてのセマンティクスやアクセシビリティを維持しつつ、「my-custom-button」という名前で定義されたカスタム要素のJavaScriptロジックやスタイルが適用されるようになります。

これにより、HTMLの組み込み要素の利点を活かしながら、よりリッチで再利用可能なコンポーネントを開発することが可能になります。このプロパティを利用する際は、事前にJavaScriptでcustomElements.define()メソッドを使ってカスタム要素を定義し、どの組み込み要素を拡張するかを明示的に指定する必要があります。isプロパティは、独自のUIコンポーネントを構築し、それらを標準のHTML要素と組み合わせて使う、Web標準に基づいたモダンなWeb開発において、拡張性と保守性の高いアプリケーションを構築するために重要な役割を果たします。

公式リファレンス: HTML is global attribute

構文(syntax)


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

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLの'is'属性でカスタム要素を拡張する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>HTML 'is' Attribute Example</title>
7</head>
8<body>
9
10  <h1>HTML 'is' 属性の利用例</h1>
11  <!-- 'is' 属性は、既存のHTML要素（この場合は<p>要素）を拡張するカスタム要素を指定します。 -->
12  <!-- ここでは、<p>要素が 'programming-language-paragraph' というカスタム要素として振る舞います。 -->
13  <p is="programming-language-paragraph">このテキストはJavaScriptによって上書きされます。</p>
14
15  <script>
16    // 'p'要素を拡張するカスタム要素を定義します。
17    // Global_attributes の 'is' 属性は、既存のHTML要素をカスタム要素として拡張するために使用されます。
18    // これにより、既存のHTML要素に新しい振る舞いや機能を追加できます。
19    class ProgrammingLanguageParagraph extends HTMLParagraphElement {
20      constructor() {
21        super(); // 拡張するHTML要素 (HTMLParagraphElement) のコンストラクタを呼び出す
22        // カスタム要素が生成されたときに、キーワードに関連するテキストを設定します。
23        this.textContent = "HTML is a programming language.";
24        this.style.color = "darkgreen";
25        this.style.fontWeight = "bold";
26      }
27    }
28
29    // 'programming-language-paragraph' という名前で、HTMLParagraphElement を拡張するカスタム要素を登録します。
30    customElements.define('programming-language-paragraph', ProgrammingLanguageParagraph, { extends: 'p' });
31  </script>
32
33</body>
34</html>

HTMLのis属性は、Global_attributes（グローバル属性）の一つで、既存のHTML要素をカスタム要素として拡張するために使用されます。この属性を使うと、特定のHTML要素が、JavaScriptで定義されたカスタム要素の機能や振る舞いを持つように指定できます。

サンプルコードでは、<p is="programming-language-paragraph">という記述により、通常の<p>要素がprogramming-language-paragraphという名前のカスタム要素として扱われるように設定しています。このカスタム要素はJavaScriptでProgrammingLanguageParagraphクラスとして定義されており、HTMLParagraphElement（HTMLの段落要素）を継承しています。

カスタム要素が生成されると、そのコンストラクタ内で、元の<p>要素のテキスト内容が「HTML is a programming language.」というキーワードを含む文に上書きされ、文字色と太字のスタイルが適用されます。これにより、HTMLコード上ではシンプルな<p>要素のように見えますが、実行時にはJavaScriptによって定義されたカスタムの振る舞いが反映されます。

is属性自体には、直接的な引数や戻り値はありません。この属性は、既存のHTML要素にカスタム要素の名前を関連付ける役割のみを持ちます。これにより、ウェブ開発者は既存のHTML要素のセマンティクス（意味）を保ちつつ、新しいUIコンポーネントや機能を追加できるという利点があります。

HTMLのis属性は、既存のHTML要素（例えば<p>要素）に、JavaScriptで定義したカスタム要素の振る舞いを適用するために使用します。この属性単体では機能せず、必ずJavaScriptでカスタム要素のクラスを定義し、customElements.define()メソッドで登録する必要があります。

カスタム要素名（例: programming-language-paragraph）は、ハイフンを含む必要があります。また、HTML側の要素に記述された初期の内容は、JavaScriptで定義されたカスタム要素の振る舞いや内容によって上書きされる点に注意が必要です。is属性は比較的新しいWeb標準技術であるため、利用する際は対応ブラウザを確認し、標準的なHTML要素では実現できない複雑な機能を追加したい場合に活用を検討してください。

HTML 'is'属性でカスタム要素を拡張する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML 'is' 属性の利用例</title>
7</head>
8<body>
9
10    <!--
11        'is' 属性は、既存のHTML要素にカスタム要素の動作を適用するために使用されます。
12        ここでは、標準の <button> 要素を 'my-custom-button' というカスタム要素として拡張しています。
13    -->
14    <button is="my-custom-button">クリックしてください</button>
15
16    <script>
17        // カスタム要素を定義するクラスです。
18        // HTMLButtonElement を継承することで、<button> 要素の標準的なプロパティやメソッドを引き継ぎます。
19        class MyCustomButton extends HTMLButtonElement {
20            constructor() {
21                super(); // 親クラス (HTMLButtonElement) のコンストラクタを呼び出します。
22                // このカスタムボタンがクリックされたときに実行されるイベントリスナーを追加します。
23                this.addEventListener('click', () => {
24                    alert('カスタムボタンがクリックされました！');
25                });
26            }
27        }
28
29        // 'my-custom-button' という名前でカスタム要素を登録します。
30        // { extends: 'button' } オプションは、このカスタム要素が標準の <button> 要素を拡張することを示します。
31        customElements.define('my-custom-button', MyCustomButton, { extends: 'button' });
32    </script>
33
34</body>
35</html>

is属性は、標準のHTML要素にカスタム要素として定義された独自の動作やスタイルを適用するために使用されるグローバル属性です。この属性を用いることで、既存のHTML要素を拡張し、新しい機能を持たせることができます。

このサンプルコードでは、標準の<button>要素にis="my-custom-button"と記述することで、my-custom-buttonというカスタム要素として定義された動作を適用しています。つまり、見た目は標準のボタンですが、その内部の振る舞いは独自に定義されたものになります。

具体的なカスタム要素の動作はJavaScriptで定義されます。MyCustomButtonというクラスはHTMLButtonElementを継承しており、これにより標準のボタンが持つ機能を引き継ぎつつ、クリック時にアラートを表示するといった独自のロジックを追加しています。

そして、customElements.define('my-custom-button', MyCustomButton, { extends: 'button' });というJavaScriptコードで、my-custom-buttonという名前のカスタム要素をブラウザに登録しています。ここで{ extends: 'button' }と指定することで、このカスタム要素が標準の<button>要素を拡張するものであることを明示しています。

is属性自体には引数や戻り値は存在しません。属性値として、適用したいカスタム要素のタグ名を指定するだけで機能します。これは、既存の要素を基に、よりリッチなウェブコンポーネントを構築できる技術です。

is属性は、既存HTML要素（例：<button>)をカスタム要素として拡張する際に使用します。これにより、標準要素の機能を維持しながら独自の振る舞いを追加できます。

最も重要な注意点は、JavaScriptのcustomElements.define()呼び出しでは、第三引数に必ず{ extends: '元のHTMLタグ名' }オプションを指定することです。このオプションを省略すると、is属性は機能しません。

カスタム要素クラスは、拡張元のHTMLインターフェース（例：HTMLButtonElement）を継承し、super()で親機能を引き継ぐことで標準的な挙動を維持します。カスタム要素名にはハイフンが必須です。この機能はモダンなブラウザで動作しますが、古い環境ではサポートされません。