为什么我应该在属性中使用“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 原型的全新元素，那么您可能会有效地使用它。