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?
It depends on the framework/library, but in general the answer falls into one of two categories:
They're just ignoring the requirement,
or
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.