HTML“数据属性”与简单的“自定义属性”

Question

I usually saw html data-attribute (s) to add specific values/parameters to html element like Bootstrap that uses them to " link " buttons to modal dialog to be opened, etc.

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

Now, I see that an almost famous CSS framework, Kube , in its new version extensively uses simple custom attribute such as in following:

<column cols="4">4</column> 

<span class="label label-black" outline bold>Black</span>

Other in-action examples are visibile for example, here .

I did not know that was possible to use simple custom attributes so I tried to search some source about this, and I found only this old similar question in which are noted almost only ( possible ) compatiblity issues.

I'm surprised that a CSS framework like Kube could use a similar solution if browser support could be so "fragile"....

So my question are:

1. How good (=cross-compatible) is Kube's approach?
2. Can I safely replace my data-attribute with simple custom ones if for example I have to pass only true/false values?

This last question is better described by an example, so replace <span class="foo" data-boo='true'>Black</span> with <span class="foo" boo>Black</span>

Answer 1

Use data attributes. They are:

• standard
• won't make a validator report them as errors (it's hard to spot unintentional errors in a validation report when they are surrounded with a pile of errors that you've made intentionally)
• won't conflict with attributes that might be added to the standard in the future

… and you don't have to give them values if you just want to check to see if they exist with a CSS attribute selector … but if you want that then you should probably just be using additional classes instead.

Answer 2

beside the fact screen readers ignore data-* attributes, the only other real-world, tangible advantage is slightly neater syntax. Eg

el.dataset.something = 'hello'

instead of

el.setAttribute('something', 'hello')

Beside that, I really don't see any difference. Everything you can do with data-* attributes you can do with regular attributes.

If you are using custom elements (eg my-something ) then you are free to create any attribute you like (whether regular or data-* ) because you own and control that unique element. You can add arbitrary attributes to standard HTML elements too but you run the miniscule risk that third-party code in your project (eg a web framework) might also set the same attribute and clobber your value.