HTML5 中的 data-* 属性

Question

正在阅读 an article on Mozilla 关于数据属性的信息。文章说您可以使用 data-* 属性来存储有关元素的额外信息。例如：

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

问题：

他们的唯一目的是向 HTML 元素添加自定义元数据还是有其他用例？

Answer 1

一个如何以 Angular 作为框架创建和使用自定义属性的示例（用于演示用例）

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);

这会将一个属性附加到按钮类，如下所示：

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

当然：这个自定义类是用CSS4 生成的。

CSS：

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

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

这绝不是问题的答案，我认为这个问题没有真正的答案。它非常广泛，但我将发布这段代码，让您了解 data-* attrs 如何在不同语言中工作的用例，以及 HTML 为何接受它们。