`data-`属性有什么用？

在 JavaScript 框架流行之前，开发者使用data-属性在 DOM 本身中存储额外的数据，没有其他的技巧，如非标准属性，DOM上的额外属性。 它是为了在没有更合适的属性或元素时将自定义数据私密存储到页面或应用中。

“data-”属性的另一个常用例子是存储第三方库或框架使用的信息。 例如，Bootstrap 库使用数据属性使<button>s 在页面的其他地方触发 modal 的动作（example）。

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
  启动弹窗
</button>
...
<div class="modal fade" id="myModal">弹窗内容</div>

如今，一般不鼓励使用data-属性。 一个原因是用户可以轻松地通过在浏览器中使用“检查元素”来修改数据属性。 数据模型最好存储在 JavaScript 环境中，并通过虚拟 DOM 调和或双向数据绑定（可能通过一个库或一个框架）让它们与 DOM 保持同步。

然而，数据属性的一个完全有效的用途，是为端到端的测试框架（如 Playwright、Puppeteer、Selenium）添加一个标识符，而不是为主要用于其他目的的测试添加类或 ID 属性。 该元素需要一种被选择的方式，而像data-test-id="my-element"这样的东西是一种有效的方式，而不至于扭曲语义标记。