为什么我应该在我的标签中使用“data-”我的标签？

Question

1. 根据许多最近的HTML规范，当我们使用自定义属性（意味着规范中未定义的任何属性）时，我们应该在它们前面添加data-。但是，我认为没有理由这样做（除非你需要完全有效的HTML，显然）。几乎所有当前浏览器都正确地忽略了自定义属性，这意味着除了来自其他代码的具有相同名称的属性之外没有冲突，我们甚至可以忽略使用自定义前缀或类似的东西（如AngularJS directive page所示）。那有什么其他好处呢？这个问题已经被问到before，至少twice，但两者都很老了。

2. 我忘了我在哪里阅读它，但有些指南说自定义HTML标签需要短划线，而单字标签无效。首先，为什么？第二，我们应该这样做，为什么（除了有效）？下划线或camelCase等会有任何问题吗？此外，与现有元素的冲突不应该是一个问题，如果与data属性一样，您可以为它们添加前缀或后缀等，请再次查看Angular directive page。

我确信之前已经问过所有这些问题，但我将它们合并为一个。这是一个好主意（很快，有人问Meta）？

Answer 1

data-*属性有两个优点：

1. 这是一种惯例，意味着其他程序员会很快理解它是一个自定义属性。
2. 您可以免费获得DOM Javascript API：HTMLElement.dataset。如果您使用jQuery，它会利用此功能填充您使用.data()找到的键和值。

自定义元素名称中-的原因是two basic reasons：

1. HTML解析器可以快速了解它是一个自定义元素而不是标准元素。
2. 如果为DOM元素注册自定义Javascript原型，则不会遇到使用相同名称添加新标准元素的问题，这会导致冲突。

您应该使用自己的自定义元素名称吗？现在它是如此新颖，不要指望它得到完全支持。让我们说它确实有效。你必须平衡额外复杂性和利益的问题。如果您可以使用类名，则使用类名。但是如果你需要一个带元素的自定义Javascript DOM原型的全新元素，那么你可能有一个有效的用法。