Зачем нужны data-атрибуты?

data-* атрибуты позволяют хранить кастомные данные в HTML-элементах без нарушения стандарта. Доступ через element.dataset.name в JS. Используются для передачи данных в CSS (attr()), для тестовых селекторов (data-testid), для хранения метаданных — id, статус, тип. Не нужно придумывать нестандартные атрибуты. В React часто используют data-testid для Testing Library: getByTestId. Не стоит хранить большие данные — для этого есть JS.