Para que servem os atributos `data-`?

Antes de os frameworks JavaScript se tornarem populares, os desenvolvedores usavam atributos data- para armazenar dados extras dentro do próprio DOM, sem outros hacks, como atributos não padrão e propriedades extras no DOM. São destinados a armazenar dados personalizados privados para a página ou aplicação, quando não há mais atributos ou elementos apropriados para isso.

Outro caso comum de uso dos atributos data- é armazenar informações usadas por bibliotecas ou frameworks de terceiros. Por exemplo, a biblioteca Bootstrap usa atributos de dados para causar <button>s executar ações em um modal em outro lugar na página (example).

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
  Iniciar modal
</button>
...
<div class="modal fade" id="myModal">Conteúdo Modal</div>

Hoje em dia, usar atributos data- geralmente não é recomendado. Uma razão é que os usuários podem modificar o atributo dos dados facilmente usando "inspecionar elemento" no navegador. O modelo de dados é melhor armazenado dentro do ambiente JavaScript e mantido em sincronia com o DOM por meio de reconciliação virtual do DOM ou binding de dados bidirecional, possivelmente por meio de uma biblioteca ou framework.

No entanto, um uso perfeitamente válido de atributos de dados é adicionar um identificador para frameworks de teste end-to-end (por exemplo, Playwright, Puppeteer, Selenium), sem adicionar classes ou atributos ID apenas para testes que são principalmente para outros fins. O elemento precisa de uma maneira de ser selecionado e algo como data-test-id="meu-element" é uma maneira válida de fazê-lo sem convoluir a marcação semântica.