HTML"；数据属性"；vs simple“；自定义属性"；

我通常看到html

数据属性

（s）向html元素添加特定的值/参数，比如Bootstrap，它使用它们将按钮“链接”到要打开的模式对话框，等等

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

现在，我看到几乎著名的CSS框架在其新版本中广泛使用了简单的自定义属性，如下所示：

<column cols="4">4</column> 

<span class="label label-black" outline bold>Black</span>

4
黑色

其他正在运行的示例是可视的，例如

我不知道使用简单的自定义属性是可能的，所以我尝试搜索一些关于这方面的源代码，我发现只有在其中才注意到几乎只有（可能的）兼容性问题

如果浏览器支持如此“脆弱”，像Kube这样的CSS框架可以使用类似的解决方案，我感到很惊讶

因此，我的问题是：

Kube的方法有多好？

例如，如果我必须只传递真/假值，我是否可以安全地用简单的自定义属性替换我的

数据属性

---

最后一个问题最好通过一个示例来描述，因此将

Black

替换为

Black

使用数据属性。它们是：

• 标准
• 不会让验证器将其报告为错误（当验证报告中包含一堆您故意犯下的错误时，很难发现无意中的错误）
• 不会与将来可能添加到标准中的属性冲突

---

…如果您只想通过CSS属性选择器检查它们是否存在，则不必为它们指定值…但是如果您需要，则可能只需使用其他类即可。

除了屏幕阅读器忽略

数据-*

属性这一事实之外，真实世界中唯一的其他属性，明显的优势是语法稍微简洁。例如

el.dataset.something = 'hello'

而不是

el.setAttribute('something', 'hello')

除此之外，我真的看不出有什么不同。使用

data-*

属性可以执行的所有操作都可以使用常规属性执行

---

如果您使用自定义元素（例如，

my something

），那么您可以自由创建任何您喜欢的属性（无论是常规属性还是

data-*

），因为您拥有并控制该唯一元素。您也可以向标准HTML元素添加任意属性，但您的项目中的第三方代码（例如web框架）也可能会设置相同的属性并破坏您的价值，这一风险微乎其微。

我不熟悉该框架，但快速了解他们的网站，建议他们使用好的旧

类。你能举一个这样的例子吗？我用一个链接编辑了我的问题，链接到特定的文档页面，在这个页面上你可以找到应用的例子。它们会让验证器窒息的原因是什么？（也就是说，这是一个无法合理避免的原因；不仅仅是因为有一些验证器不支持它，因为它编写得很糟糕）。@BVernon-因为您编写的任意属性不是HTML规范允许的属性。