Что такое data-атрибуты?

Data-атрибуты (data-*)

Позволяют хранить произвольные данные прямо в HTML без нестандартных атрибутов.

Синтаксис

<div data-user-id="42" data-role="admin" data-is-active="true">
  Пользователь
</div>

Доступ через JS

const el = document.querySelector("div")

// Чтение - kebab-case → camelCase
el.dataset.userId    // "42"
el.dataset.role      // "admin"
el.dataset.isActive  // "true"  (всегда строка!)

// Запись и удаление
el.dataset.userId = 100
delete el.dataset.role

CSS-селекторы

[data-role]           { ... }  /* наличие атрибута */
[data-role="admin"]   { color: red }  /* конкретное значение */

Делегирование событий

<ul>
  <li data-id="1">Задача 1</li>
  <li data-id="2">Задача 2</li>
</ul>
<script>
  document.querySelector("ul").addEventListener("click", (e) => {
    const id = e.target.closest("li")?.dataset.id
    if (id) deleteTask(id)
  })
</script>

Не храните конфиденциальные данные в data-атрибутах - они видны в HTML.

Источники

• MDN: data-*
• MDN: HTMLElement.dataset