html - 为什么我应该在属性中使用 "data-"或在标签中使用破折号？

Question

1. 根据许多最新的 HTML 规范，当我们使用自定义属性(即规范中未定义的任何属性)时，我们应该在它们前面加上 data- 前缀。但是，我认为没有理由必须这样做(显然，除非您需要完全有效的 HTML)。几乎所有当前的浏览器都正确地忽略自定义属性，这意味着除了与其他人代码中的同名属性之外没有冲突，并且我们甚至可以使用自定义前缀或类似的东西来忽略这一点(如 AngularJS directive page 上的建议)。如果有的话，还有哪些其他好处？这个问题已被问过before ，至少twice ，但两人都已经很老了。

2. 我忘记在哪里读到的，但一些指南说自定义 HTML 标签需要破折号，并且单个单词标签无效。首先，为什么？其次，我们应该这样做吗？为什么(除了有效之外)？下划线或者驼峰命名法等会有问题吗？此外，与现有元素的冲突不应该成为问题，如果像 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 原型(prototype)，则不会遇到添加同名新标准元素的问题，否则会导致冲突。

您应该使用自己的自定义元素名称吗？现在它还很新，所以不要指望它会得到完全支持。假设它确实有效。您必须平衡额外复杂性的问题和好处。如果你可以不用类名，那么就使用类名。但是，如果您需要一个带有自定义 Javascript DOM 原型(prototype)的全新元素，那么您可能可以有效地使用它。