J.S. 独自属性は妥当なのか？

Question

はじめに

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-*属性に移行しない理由は何ですか？

以上、ご回答よろしくお願いします。

Answer 1

Vue.jsの場合、このあたりに議論がありましたが、

• v-***のような属性でもパースはできる
• テンプレートは直接HTMLとして描画するものではないので、完璧に文法に従わせたところで実益がない
• 最終型のHTMLに現れるものではない
• data-属性を使うにしても衝突の危険がある

ということで、独自の属性を使い続けているとのことです。どうしても気になるなら、VueのテンプレートをHTMLに直接書かずに単一ファイルコンポーネントを使う、という選択肢もあります。

Comments

[maisumakun]

「DOMベースのテンプレート」自体に、DOMであることに由来する限界があるので、個人的にはDOMベースのテンプレートは「限界や厳密な文法違反を気にしない人が使う便法」というように捉えています。

https://jp.vuejs.org/v2/guide/components.html#DOM-%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%91%E3%83%BC%E3%82%B9%E6%99%82%E3%81%AE%E8%AD%A6%E5%91%8A

[boseki]

ご回答ありがとうございます。

> v-***のような属性でもパースはできる
無効な属性名のためブラウザが無視し、表立った問題は出ないから正常にパースできているのでしょうかね...。
もしそうだとすれば「エラーが発生した後、それをブラウザがどう扱うか」に問題を丸投げしている状態ということになりますが、あまり良い状態ではないと思います。

> テンプレートは直接HTMLとして描画するものではない
> 最終型のHTMLに現れるものではない
これは質問にて書いた「すべてのディレクティブを削除するなどして、最終的に妥当なマークアップへ置換されている」場合ですかね。もしそうであれば、Vue.jsが最終的に妥当なマークアップへ変換しているということになりますが、変換前にHTMLとして解析されるものは「HTMLではないもの」ということになります。

つまり、ブラウザがよしなにしてくれることを想定していることになりますが、この不安定な状況に「いつ突然使えなくなってもおかしくないのでは」という危うさを感じます。

> data-属性を使うにしても衝突の危険がある
これは少しdata-*属性を使わない理由として厳しいかな、と思います。v-*属性が衝突する可能性もあるので、わざわざ文法違反をしてまで独自属性とする必要はなかったのではないかと思います。そもそも、data-*属性でも適切にプレフィックスを振れば、衝突対策としては十分と感じます。

> VueのテンプレートをHTMLに直接書かずに単一ファイルコンポーネントを使う
少し公式サイト(https://jp.vuejs.org/v2/guide/single-file-components.html)を読んできました。

これを使うと、Vue.jsのテンプレートを妥当なマークアップへ変換した後に、指定した要素内へそれらを入れていく、ということが可能なのでしょうか。これが現状では一番良さそうですね。レンダリングが完了し、テンプレートの変換処理が終了するまで待機しなければならないところが難点ですが。

> 「限界や厳密な文法違反を気にしない人が使う便法」
確かに、独自属性を使う時点で、多少HTMLの文法を無視することは覚悟していたのかもしれません。

関連する機能として、Custom Elementsという独自のHTML要素を生成する機能もあるようですが、これも質問で参照したHTML Standardの仕様と競合してしまっているので、どのように解決されていくのか(それとも既に解決済みか)、が気になりますね。それによっては、今後Vue.jsやAngularの行っている独自属性がHTML Standardでも許容されるかもしれません。

---

しかし現状では、ブラウザが正しいHTMLを解析できるようになるための、何らかの対応策が用意されるべきだと思います。(確かに単一ファイルコンポーネントは良い仕組みですが、問題の本質的な解決にはなっていません。)

回答に載せてくださったURL先のissueを読むと、意見が分かれているようなので、この質問ももう少しオープンにして、他の方の回答を待ってみようと思います。

以上、長文失礼しました。