What are data-* attributes, and how are they used?

data-* attributes store custom data in HTML elements, which can be accessed via JavaScript for dynamic content manipulation.

Example:

<div data-user-id="123" data-role="admin">User</div>
<script>
  const userId = document.querySelector('div').dataset.userId;
</script>