data-* attributes in HTML5

Question

was reading an article on Mozilla about data attributes. The article says that you can use data-* attributes to store extra information regarding the element. For example:

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Question:

Is their sole purpose to add custom metadata to an HTML element or are there other use cases?

What kind of *other use case* do you have in mind? Their purpose is to allow authors (us) to set **custom** attributes, where it is normally not allowed (because HTMLElements have rules regarding which attributes they accept). So from there, you can build up about any use-case you'd like. — Kaiido, Jul 20 '18 at 07:47
As i understand it. It's pretty much to bridge the gap (or create their own way of doing this) to angular's way of doing things. eg. ng-model, ng-class, ng-*custom*. I'll post an example from angularjs shortly — Joel, Jul 20 '18 at 07:49
Possible duplicate of [HTML5 custom attributes - Why would I use them?](https://stackoverflow.com/questions/5032841/html5-custom-attributes-why-would-i-use-them) — Kaiido, Jul 20 '18 at 07:52
@Joel There were no gap to fill, [HTML5 working draft of 2010.10.19](https://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes) included [data-attributes](https://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes), Angular first release was the very next day ;-) Though they are still using invalid markup till today... — Kaiido, Jul 20 '18 at 08:02
but does it have to be 'data'? Angular is using the prefix 'ng', so you can basically add whatever metadata you want to html elements? — Willem van der Veen, Jul 20 '18 at 08:03
@WillemvanderVeen to be valid HTML5, yes. Now, browsers are lenient enough to accept anything, and Angular are lazy (?) enough to stick with their invalid (had no choice at the time) invalid attribute syntax — Kaiido, Jul 20 '18 at 08:05
Can I access attributes other than data-* via the dataset property of the html DOM element? — Willem van der Veen, Jul 20 '18 at 08:10
@Kaiido - data attributes are significantly older than that. The WHATWG Living standard included them at least as early as [September 2008](https://web.archive.org/web/20080906041347/http://www.whatwg.org:80/specs/web-apps/current-work/multipage/dom.html#embedding) — Alohci, Jul 20 '18 at 13:31
@Alohci yes I guess the idea didn't came up just like that on this 19th of october in 2010 ;-) Was just the oldest mention I found from the w3c, and when I saw it was just the day before Angular first release, my point that they didn't *filled **this** gap* was made. — Kaiido, Jul 20 '18 at 13:39

Joel · Accepted Answer · 2020-07-29T22:15:00.073

An example of how to create and use custom attrs with Angular as framework (to demonstrate the usecase)

HTML:

<button id="monitorBtn-{{machine.id}}">
     <span ng-show="!$ctrl.isMonitored(machine)">
         StackOverFlow
     </span>
</button>

JS:

var element = angular.element("#monitorBtn-"+machine.id);
element.attr("tooltip","Your Tooltip Text"); // <-- setting custom attr
element.attr("flow","up");
console.log(element);

This will append an attribute to the button-class like this:

<button id="monitorBtn-{{machine.id}}" tooltip="Your tooltip Text" flow="up" ....>

of course: this custom-class is generated with CSS4.

CSS:

:root {
    --bg: #05a8ff;
    --dink: 7px;
}

[tooltip] {
    position: relative;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + var(--dink));
}

This is in no way an answer to the question, and I don't think there is a real answer to this question. It's pretty broad, but i'll post this code to give you an idea of the usecase for how data-* attrs could work in different languages, and why HTML is embracing them.

Sorry for nitpicking, but there is no such thing as "CSS4" and will never be (https://www.xanthir.com/b4Ko0). "Levels" of spec modules are not "versions" of the _CSS language_. Selectors Level 4 (actually _not_ used in your example) are not "CSS4", Media Queries Level 5 (https://drafts.csswg.org/mediaqueries-5/) is not "CSS5", and Custom Properties Level 1 (used in your example) are not "CSS1" — Ilya Streltsyn, Jul 20 '18 at 09:46

data-* attributes in HTML5

Question:

1 Answers1