Для чего нужны атрибуты `data-*`?

Кастомные данные в разметке

data-* хранят приватные для приложения сведения без невалидных атрибутов.

<button data-user-id="42" data-action="invite">Invite</button>

const btn = document.querySelector('button');
btn.dataset.userId; // '42' — camelCase
btn.dataset.action; // 'invite'

Зачем

Делегирование событий, конфиг виджета, хуки для тестов (data-testid), мягкая интеграция без глобальных JS-объектов.

Ограничения

Не для секретов (видно в DOM). Большие JSON лучше не пихать в атрибуты — тяжёлый DOM и XSS-риск при неверном вставлении.