Data-атрибуты​

На самом деле, вёрстка может хранить крайне много информации. Помимо предопределённых атрибутов для каждого из тегов, у разработчиков есть возможность передавать свои кастомные атрибуты к любому тегу. Такие атрибуты называются data-атрибутами и выглядят, например, так:

<button data-order="1">Кнопка</button>

В этом случае мы создаём кнопку, которая имеет какой-то приоритет, например, приоритет отображения. То есть при помощи кастомного свойства мы можем определить, что такая кнопка будет отображаться первее всех. Конечно же, чтобы это действительно так работало, нам необходимо задать либо кастомные стили, например:

button[data-order] {
 order: attr(data-order)
}

Либо как-то обработать data-атрибут в JavaScript:

const element = document.querySelector(button[data-order])

const order = element.dataset.order

Стоит ли использовать data-атрибуты сегодня? Абсолютно точно да, но только в паре случаев: для более удобного тестирования и для чего-то, связанного с динамическим отображением. Для тестирования data-атрибуты могут быть использованы для однозначного поиска какого-либо элемента в вёрстке, например:

<button data-testid="1">Кнопка</button>

Ни в коем случае не записывайте в такие атрибуты никакие важные бизнес-данные. Помните, что вёрстку может отредактировать любой через код элемента, ваше приложение становится слишком уязвимым.

Да и в контексте современных web-фреймворков, использование data-атрибутов всё больше теряет смысл из-за того, что фреймворки предоставляют куда более удобные и безопасные способы хранения данных

#web #theory #javascript #useful