HTML
この記事では、buttonなどの標準HTML要素を土台にしながら、JavaScriptで独自の動作を加えるカスタム要素の仕組みとis属性の基本を説明します。
この記事でわかること
- 組み込み要素を拡張する
is属性の考え方 - 元の要素が持つ意味と操作性を保つこと
- 対応状況を確認して代替案を用意する理由
The is attribute is used to add special custom functionality to standard HTML tags.
is 属性
is 属性は、標準の HTML 要素に「この要素はカスタム要素として扱ってね」と教える目印です。
例えば <button is="fancy-button">OK</button> と書くと、見た目は <button> ですが、中身のふるまいは fancy-button という JavaScript で定義したカスタム要素になります。つまり――
- 既存タグをそのまま使えるので、フォームやアクセシビリティの機能を失わない。
- 拡張したい機能だけを追加できるので、再利用しやすい。
- 対応ブラウザーはまだ限られる（Chrome 系は可、Firefox は未対応）ため、実運用時は代替手段も検討する。
要するに、「元のタグ＋あたらしい動き」を両立させるための仕組みが is 属性です。