Data Attributes

Definition

Attributs personnalisés préfixés par data-* qui stockent des informations supplémentaires sur un élément HTML. Accessibles en JS via element.dataset et ciblables en CSS via [data-*].

Analogie

Comme des post-it collés sur des dossiers : ils ajoutent des infos sans modifier le contenu du dossier.

Exemple de code

<button data-action="delete" data-id="42">
  Supprimer
</button>
<script>
btn.addEventListener('click', (e) => {
  const { action, id } = e.target.dataset;
});
</script>

Cas d'usage

Stocker des métadonnées légères sur les éléments pour le JS sans polluer les attributs HTML standards.

Anti-pattern

Termes lies