web-dev-qa-db-ja.com

カスタム要素の名前にはダッシュが必要ですか？

独自のカスタム要素に名前を付けることは可能ですか<date>、<person>、<city>またはダッシュを使用しない他の人？それらなしで定義要素を使用できますか？

polymerweb-componentx-tag
43
addyo

すべてのブラウザは、「既知」と見なされるHTML要素の有限リストをサポートしています。不明な要素（<city>、<person>など）は、最新のブラウザのHTMLパーサーでは通常エラーをスローせず、代わりにHTMLUnknownElementから継承します。 IEの古いバージョンでは、このような要素は子のない空のノードとしてDOMに挿入されていました（1）。

カスタム要素 仕様 必須 すべてのカスタム要素の名前にハイフン（-）が含まれている。したがって、<person>ではなく、<my-person>または<x-person>を使用します。これらは有効な名前ですが、<person>は不明な要素と見なされます。

ダッシュを使用すると、HTMLパーサーは実際のカスタム要素と通常の要素の違いを効果的に認識できます。また、標準グループが新しいタグをHTMLに追加するときに、将来のレベルの機能を有効にすることもできます。

以下を除いて、ハイフンで区切られた名前を使用できます。

  • annotation-xml
  • color-profile
  • font-face
  • font-face-src
  • font-face-uri
  • font-face-format
  • font-face-name
  • missing-glyph

私の知る限り、これらの名前はSVG、MathML、およびその他の仕様からの予約名です。たとえば、<font-face>要素の詳細は info です。

（1）これにより、開発者がJavaScriptを使用してIE（eg <article>）でダミーのHTML5タグを作成し、次に、CSSを使用して通常の要素ごとにスタイルを設定できます。

73
addyo