我经常看到html data-attribute（s）将特定的值/参数添加到像Bootstrap这样的html元素中，它使用它们来“ link ”按钮来打开模态对话框等。
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
现在，我看到一个几乎着名的CSS框架Kube，在其新版本中广泛使用简单的自定义属性，如下所示：
<column cols="4">4</column>
<span class="label label-black" outline bold>Black</span>
其他动作示例是可见的，例如，here。
我不知道可以使用简单的自定义属性，所以我尝试搜索一些关于此的来源，我发现只有this old similar question，其中几乎只注明了（可能的）兼容性问题。
我很惊讶像Kube这样的CSS框架可以使用类似的解决方案，如果浏览器支持可能如此“脆弱”......
所以我的问题是：
data-attribute，例如我必须传递真/假值吗？ 通过示例更好地描述了最后一个问题，因此将<span class="foo" data-boo='true'>Black</span>替换为<span class="foo" boo>Black</span>
答案 0 :(得分：6)
使用数据属性。他们是：
...如果你只想检查它们是否存在CSS属性选择器，你就不必给它们值了......但是如果你想要它，那么你应该只是使用其他类。
答案 1 :(得分：0)
除了屏幕阅读器忽略 data-* 属性这一事实之外，唯一的另一个现实世界的、有形的优势是稍微简洁的语法。例如
el.dataset.something = 'hello'
代替
el.setAttribute('something', 'hello')
除此之外，我真的没有看到任何区别。您可以使用 data-* 属性执行的所有操作都可以使用常规属性执行。
如果您使用自定义元素（例如 my-something），那么您可以随意创建您喜欢的任何属性（无论是常规属性还是 data-*），因为您拥有并控制该独特元素。您也可以向标准 HTML 元素添加任意属性，但您面临的风险很小，项目中的第三方代码（例如网络框架）也可能设置相同的属性并破坏您的值。