質問: はじめに ---- Vue.js, AngularなどのフロントエンドWebアプリケーションフレームワークには、`v-*`, `ng-*`属性などの「ディレクティブ」と呼ばれる、独自属性のようなものがあります。ここで、HTML内で「独自属性を使っている」というところに違和感を感じたため、この質問をするに至りました。 独自要素は妥当なのか? ----------- 少なくとも私は、**妥当ではない**、と結論付けました。 なぜならば、独自属性はHTMLの仕様に従っていないからです。 フロントエンドWebアプリケーションフレームワークが動作する場所は、結局のところHTML文書内なので、HTMLの仕様が適用されるべきだと考えました。 HTMLの仕様に従っていない根拠として「HTML Standard - 3.2.1 Semantics」が挙げられます。 これによれば、この仕様または他の適用可能な仕様で許可されない要素、属性、または属性値を使用してはなりません。そのため、`v-*`, `ng-`ディレクティブは妥当ではないと考えることができます。 > > Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future. > > > また、これはVue.jsにのみ該当しますが、属性名としてコロンは許可されていません。そのため、Vue.jsにて使われているコロンを含む独自属性は妥当ではないと考えられます。 もしも「すべてのディレクティブを削除するなどして、最終的に妥当なマークアップへ置換されている」としても、それが行われるのはブラウザがHTMLを読み込み、解析をした後であり、妥当ではないHTMLが読み込まれている事実には変わりがありません。 質問 -- そこで質問ですが、 * Vue.js, Angularの独自属性はHTMLとして妥当ですか?また、もし妥当でない場合、これらのフレームワークは何かの対策を行っていますか? * Vue.js, Angularが独自属性を使い続け、`data-*`属性に移行しない理由は何ですか? 以上、ご回答よろしくお願いします。
回答: Vue.jsの場合、このあたりに議論がありましたが、 * `v-***`のような属性でもパースはできる * テンプレートは直接HTMLとして描画するものではないので、完璧に文法に従わせたところで実益がない * 最終型のHTMLに現れるものではない * `data-`属性を使うにしても衝突の危険がある ということで、独自の属性を使い続けているとのことです。どうしても気になるなら、VueのテンプレートをHTMLに直接書かずに単一ファイルコンポーネントを使う、という選択肢もあります。