data-*: дополнительные данные элемента
Атрибуты data-* хранят небольшие прикладные данные рядом с элементом, когда стандартного HTML-атрибута для них нет.
Назначение
Атрибуты data-* хранят небольшие прикладные данные рядом с элементом, когда стандартного HTML-атрибута для них нет.
Как это работает
В JavaScript data-product-id доступен как dataset.productId. Значения dataset являются строками: число нужно преобразовать и проверить отдельно. CSS может выбрать элемент по наличию или значению атрибута.
Пример
<style>[data-state="draft"]{border-left:4px solid #b56b00;padding:12px}</style>
<article data-product-id="42" data-state="draft"><h2>Учебный материал</h2><p>Статус: черновик</p></article>Что должно получиться
Карточка получает рамку по атрибуту состояния. Видимая подпись «черновик» продублирована обычным текстом, поэтому смысл не зависит от чтения служебных данных.
Граница применения и частая ошибка
Не храните в data-* секреты и не делайте их единственным местом для важного текста. Пользователь и сторонние скрипты страницы могут прочитать и изменить эти значения.
Самостоятельная проверка
Измените data-state с draft на ready и добавьте соответствующий CSS-селектор. Затем сравните строку "0" с числом 0 в отдельном JavaScript-файле: тип имеет значение.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.