Why can frontend frameworks can create custom attributes but I'm expected to prepend "data-" to mine

Question

Why are frontend frameworks able to create custom attributes on html elements like

Vue for instance

<div v-for="...">

Html validators complain if I make up my own.

<div something>

Telling me I should pretend data- like this

<div data-something>

I understand the importance of consistency and standards. But I'm curious if frontend frameworks are doing something special behind the scenes to circumvent this rule.

Or are they simply ignoring it?

Answer 1

It depends on the framework/library, but in general the answer falls into one of two categories:

1. They're just ignoring the requirement,
   or

2. The "HTML" you write is pre-processed before the browser sees it, so by the time the browser sees it, it has only valid attributes.

Your example seems to be from Vue.js. In that case, when using the full framework, it's answer #2 above — you're writing an Example.vue file which is pre-processed before the browser sees it. (Vue does use a data- attribute for the root of the app: data-v-app.) But they also have petite-vue, which is targeted at progressive enhancement; its README.md shows it just breaking the rule. The way browsers handle unknown attributes is specified (essentially: they include them in the element's attributes set but otherwise ignore them); the data- prefix is important for avoiding conflict with future standard attributes, but it would seem that for petite-vue the authors are counting on it being unlikely that v- or the @ sign will be used as a standard prefix.

Answer 2

Regarding Vue:

HTML you provide for Vue isn't a HTML rendered. It's compiled by Vue into JS code that creates a virtual DOM. Then the Vue default renderer converts it to actual "proper" HTML without v-for and other directives.

If you want to validate HTML - validate the rendered HTML page.

Vue templates are pseudo HTML helping to create render function for virtual DOM allowing better readability and involving non-programmers like designers.

I guess the same goes for other frameworks - you should validate the final rendered HTML.