为什么我在自定义属性前添加“ data-”？

Question

因此，我使用的所有自定义数据属性都应以“ data-”开头：

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

如果我不理会这会发生什么不好的事情？即：

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

我想一件坏事是我的自定义属性可能与具有特殊含义（例如name）的HTML属性发生冲突，但是除此之外，仅编写“ example_text”而不是“data-example_text”是否有问题？（它不会验证，但是谁在乎呢？）

Answer 1

保留自定义属性以data- *为前缀有几个好处。

1. 它保证在将来的版本中不会与HTML扩展发生冲突。HTML5中引入的一些新属性已经在某种程度上遇到了这个问题，现有站点正在使用具有相同名称的属性，并且期望使用不同且不兼容的自定义行为。（例如，众所周知，元素的required属性input过去在某些流行的网站上发生过冲突）

2. 有一个方便的DOM API HTMLElement.dataset，用于从脚本访问这些属性。现在大多数浏览器都支持它。

3. 它们清楚地表明哪些属性是自定义属性，哪些属性是标准化属性。这不仅允许验证者允许任何带有data- *的属性，同时仍对其他属性执行有用的错误检查（例如，捕获输入错误），从而帮助验证者，而且还有助于使源代码的这一方面对那些阅读它的人（包括人们）更清晰在原作者之后可能会在网站上工作的人。