Maybe so-called "invalid" HTML attributes are not the only solution, but in my opinion it is a simple way to embed metadata within any element.<p>Imagine that such markup is then passed to a web application through XHR. In that case scripts aren't parsed and executed. In this case you have three ways to attach a behaviour:<br>
</p><p>2) on-event standard attributes (but they not performant since they're parsed every time the event fires and the cannot include chars like > or ", they need to be escaped)<br>3) assigning a "class" and some metadata using "data-", then getElementsByClassName and addEventListener<br>
</p><p>The same with CSS: you can use "style" for each element or "data-" attributes queried by attr()</p><p>For what concerns browser support, these attributes are at all part of the DOM tree, so I can pass their names to getAttribute and setAttribute, but they don't get any special interface.</p>
<p>It's the same in the XML serialization with different application-specific namespaces: they use only DOMAttr interface defined in DOM3Core and they're not part of any infoset (not part of ID list or NAME list)</p>
<p>Personally I prefer the latter (XML) solution, but there are context where using XML serialization is not possibile (for example in user generated content) so there is a definite need for a SGML way to add custom attributes without conflicting with standards.</p>