【カスタム要素】javascriptを用いて独立した要素を作る！「HTML・解説・初心者向け」- ノブレコ
nobreco
★カスタム要素の概要
カスタム要素は「web components」という技術群を構成するものの一つです。
主にjavascriptを用いて独自の要素を定義することができます。
カスタム要素には、新しく要素を定義する「自律カスタム要素」と既存の要素をカスタムする「カスタマイズビルトイン要素」があります。
・自立カスタム要素：任意の要素を表すHTML要素インターフェイスを拡張する
・カスタマイズビルトイン要素：HTML仕様で定義された要素を拡張する。例えば、HTML Button ElementインターフェイスであればButton要素をもとに拡張できる。
web componentsとは
HTML要素をコンポーネント化する技術群の総称のことを言います。
主要な技術群には、以下の３つで構成されます。
１．カスタム要素
２．Shadow DOM
３．HTMLテンプレート（template要素、slot要素）
カスタム要素の説明
カスタム要素とは、javascriptに実装されたAPI（Application Programming Interface）の一つです。
この要素で定義した要素は、機能としてHTML標準要素と同じように使用することができます。
要素名はkebab-caseで指定する必要があり、標準の要素と区別するために必ず２つ以上の単語で構成する必要があります。
■使用目的
古くからコンテンツを制作している者は、HTML要素を独自に定義して使いたいと望む機会がありましたが、独自に定義した要素を使用すると、ブラウザは柔軟に解釈することがある一方で、古いHTML仕様ではそのような独自の要素は定義されていないため、構文エラーとなっていました。
そのような問題を解決するために定義されたのが、カスタム要素です。
現在のHTML仕様では、カスタム要素を使って独自の要素を定義することで、コンテンツ制作者が思い通りのHTML要素名を一定の制約のもとで定義できるようになりました。
HTMLの定める仕様に適合させながら、独自に定義した要素を使用したい場合に用いられる便利な要素です。
要素名の制約
カスタム要素の要素名の制約は、大まかに以下の２点があります。
制約
１．アルファベットの小文字で始まること。
２．１つ以上のハイフン（-）を含むこと。
HTMLの要素はハイフンを含む要素名が存在しません。
その他にも、MathMLやSVGの要素でもハイフンを含む要素は限られています。
もしソースコード上でこのようなハイフンを含んだ要素を発見した場合、ほぼカスタム要素で独自に定義された要素と思ってよいでしょう。
まとめ
この記事では、カスタム要素についての解説をいたしました。
この要素は独自に要素を定義するためのもので、web componenntsと呼ばれる技術群の一つです。
javascriptとの併用も必要になり、その仕組みも複雑になるものが多いので、慣れや知識が無い場合に利用することは少し難しいかもしれません。
使えれば非常に便利な要素になるので、こういった要素もあるということを覚えてもらえれば幸いです。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん༼ つ ◕_◕ ༽つ
