Что такое кастомные data-атрибуты в HTML? Как они пишутся, как к ним обращаться из JavaScript и для чего они используются?

Кастомные data-атрибуты в HTML — это специальные атрибуты, которые начинаются с data- и позволяют хранить произвольные пользовательские данные прямо в элементах HTML. Они используются для передачи дополнительной информации, которая не влияет на отображение, но может быть полезна для скриптов.

Как пишутся:

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

Как обращаться из JavaScript: Можно получить доступ через свойство dataset элемента, где имена атрибутов после data- преобразуются из kebab-case в camelCase:

const div = document.querySelector('div');
console.log(div.dataset.userId); // "123"
console.log(div.dataset.role);   // "admin"

Для чего используются:

• Хранение данных, связанных с элементом, без необходимости создавать дополнительные структуры данных.
• Удобство передачи параметров в скрипты.
• Используются в различных UI-библиотеках и фреймворках для настройки поведения компонентов.

Таким образом, data-атрибуты — простой и стандартизированный способ хранить пользовательские данные в DOM.