数据属性有什么意义？

Question

After reading the answers to this question , my mind feels like a melting ice cream cone.

Considering the fact that you can assign arbitrary properties to DOM elements.

eg

 var myDiv = document.createElement('div'); myDiv.potato = ["puppies", "sea otters"] alert(myDiv.potato); 

What is the point of the whole data-* convention?

What advantage does it offer over assigning arbitrary properties?

Answer 1

They are guaranteed not to conflict with real attributes (in current or future specifications).

They don't cause noise when validating markup.

People maintaining your code who know HTML will know what sort of things a data-* attribute is used for and won't get confused trying to look up an attribute they might think they just hadn't heard about.

Answer 2

Putting them in your HTML:

<span data-tooltip="I will be processed by JavaScript and displayed in a tooltip,
    but because I am content, I belong in the HTML, so... here I am!">Hello!</span>

Making use of them in your CSS:

<span data-number="1">Hello?</span>
[data-number]:before {content: attr(data-number) '. '}

And many more uses, but these are two that jump to mind immediately.