Для чего используют data-атрибуты?

data-атрибуты в HTML позволяют хранить в элементах пользовательские данные, которые можно использовать в JavaScript или CSS. Эти атрибуты начинаются с префикса data-, за которым следует имя атрибута, определенное разработчиком.

Пример использования:

<div id="user" data-user-id="12345" data-role="admin">
  Профиль пользователя
</div>

<script>
  const userElement = document.getElementById("user");
  const userId = userElement.dataset.userId;
  const userRole = userElement.dataset.role;

  console.log(userId);  // "12345"
  console.log(userRole); // "admin"
</script>

Основные преимущества data-атрибутов:

Хранение данных на клиентской стороне:
- data-атрибуты позволяют безопасно хранить небольшие объемы данных, которые могут быть использованы без загрузки дополнительных ресурсов с сервера.
Доступность в JavaScript:
- Легко доступ к данным можно получить через свойство dataset у элемента в JavaScript.
Совместимость с CSS:
- data-атрибуты могут быть использованы для стилизации элементов в CSS с помощью селекторов атрибутов. Например:
```
[data-role="admin"] {
    background-color: yellow;
}
```
Гибкость и масштабируемость:
- Разработчики могут добавлять любое количество пользовательских данных без конфликтов с существующими HTML-атрибутами.