Custom data attribute (data-*) trong HTML là gì?

data-* cho phép gắn dữ liệu tuỳ ý lên element mà vẫn hợp lệ theo HTML spec (dùng attribute tự chế như userid="123" thì không).

<li data-user-id="123" data-role="admin" data-active>Định</li>

const li = document.querySelector('li')
li.dataset.userId   // '123'  — kebab-case tự đổi sang camelCase
li.dataset.role     // 'admin'
li.dataset.userId = '456'      // ghi ngược lại DOM
delete li.dataset.role         // gỡ attribute

Dùng được cả trong CSS:

li[data-role="admin"] { font-weight: 700; }
li[data-active] { color: var(--accent); }

Ứng dụng thực tế: gắn hook cho test (data-testid), truyền id xuống event delegation, đánh dấu state cho CSS thay vì thêm/bớt class.

Lưu ý: dataset luôn trả string — Number(li.dataset.userId) chứ đừng so sánh thẳng với số. Và đừng nhét dữ liệu nhạy cảm vào đây: nó nằm nguyên trong HTML gửi về client.