Why not using HTML5 data-* attributes

Hi, is there a good reason why you don’t go with the data-* attributes and invent your own standard with v-*?

From https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes:

In addition, search crawlers do not index data attributes’ values.

[yyx990803]

Note the difference between valid HTML syntax vs fully-valid HTML. The former means it adheres to the syntax constraints laid out in the spec, and only the syntax; the latter entails following the spec to every extreme detail, e.g. if an element doesn’t have a certain attribute then you cannot use it on that element.

At the syntax level attribute names are defined as follows:

Attributes have a name and a value. Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), “>” (U+003E), “/” (U+002F), and “=” (U+003D) characters, the control characters, and any characters that are not defined by Unicode.

So all Vue templates are valid HTML at the syntax level. We have practical reasons to do that because it enables any spec-compliant HTML parser to be able to parse Vue templates - this makes it possible to reuse excellent HTML-based tools already out there in all aspects of tooling. However, it is my opinion that striving for fully-valid HTML in a templating syntax is completely pointless, because the template is not what eventually gets rendered in the browser. The template’s job is to convey the connection between your JavaScript model and the final desired output (which should be, and will be fully-valid HTML). Making your templates fully valid HTML has zero practical benefits except for maybe getting rid of the warnings from your overly-rigorous IDE.

[FibreFoX]

Maybe it would be a good idea to document this design-decision somewhere inside the vue-documentation. As the attributes are not “XML-attribute”-compatible (because they are containing the colon sign U+003A) this must have been decided sometime in the past.

Any relation to some specs for HTML5 would be nice, there seems a lot of confusion about this whole “data-” thing. Don’t get me wrong, I used to understand HTML differently, but it seems to “just work” inside the browsers … but fails for syntax-checker even like the w3c-markup checker. I tried some dummy website of mine, how the syntax checker sees some v-on:click and attributes, and it fails with errors like Attribute v-if not allowed on element div at this point.. When there is some evaluation about used web-frameworks, and the customer requires the website to be syntax-checker-compliant, then Vue can’t be used.

Could we (developers) please have some references where the design-decision are coming from? (and yes, it feels a bit odd to “discuss” this on some closed issue …)