Attributs dynamiques pour les composants Webflow : le guide complet

Les composants Webflow ont longtemps souffert d'une limitation frustrante : impossible de modifier finement les attributs HTML d'une instance à l'autre sans contourner le système.

C'est désormais résolu.

Le 4 mai 2026, Webflow a publié une mise à jour qui change la donne pour tous ceux qui construisent des sites accessibles, connectés à un CMS, ou qui gèrent des intégrations tierces : les dynamic attributes for components sont disponibles sur tous les plans, sans surcoût.

Ce guide vous explique ce que ça change concrètement, et comment en tirer parti dès aujourd'hui.

Ce que sont les attributs HTML dans Webflow

Avant d'aller plus loin, un rappel rapide.

Un attribut HTML, c'est une information attachée à une balise pour modifier son comportement ou transmettre des données à un script.aria-label, data-category, role, tabindex... Ce sont tous des attributs.

Dans Webflow, vous pouvez en ajouter manuellement depuis le panneau Element Settings, section Custom Attributes.

Jusqu'ici, ça fonctionnait bien pour les éléments statiques.

Le problème survenait avec les composants.

Quand vous créez un composant (une card, un bouton, une modale), chaque instance partagée sur le site hérite de la même structure.

C'est le principe du composant.

Mais si vous vouliez que l'instance A porte aria-label="Voir le projet Lynco" et l'instance B porte aria-label="Voir le projet Jaroussie", vous étiez bloqué.

Il n'y avait aucun moyen natif de rendre un attribut variable par instance.

Ce que change la mise à jour du 4 mai 2026

Webflow a introduit deux nouveautés distinctes, toutes les deux disponibles immédiatement :

La prop "Attributes" : piloter tout le bloc d'attributs par instance

La nouvelle prop Attributes peut être connectée à n'importe quel élément à l'intérieur d'un composant, ce qui permet de modifier ou d'étendre la liste entière des attributs sur chaque instance.

Concrètement : vous créez une prop de type "Attributes" sur votre composant principal.

Sur chaque instance, vous pouvez définir une liste d'attributs différente : clés, valeurs, tout est remplaçable.

C'est particulièrement utile pour les composants qui doivent se comporter différemment selon leur contexte : un accordéon qui doit exposer aria-expanded="true" ou false, un bouton qui pointe vers des ressources différentes selon la page, une card qui transmet des données à un outil analytics via data-event.

À retenir : avec la prop Attributes, vous n'êtes plus obligé de créer un composant distinct pour chaque variation d'attributs. Une seule source de vérité, des instances configurables.

Attributs dynamiques par nom ou valeur : la connexion au CMS et aux props

La deuxième nouveauté est tout aussi puissante.

Tous les éléments supportent désormais la connexion du nom d'un attribut à une prop, un champ CMS ou des données de page, ce qui permet de rendre la clé ou la valeur d'un attribut individuel dynamique.

Auparavant, vous pouviez lier la valeur d'un attribut à un champ CMS.

Maintenant, vous pouvez aussi lier le nom lui-même.

C'est une distinction qui semble subtile mais qui ouvre des cas d'usage réels.

Cas d'usage concrets

1. Accessibilité sur des cards de portfolio

Vous avez un composant card qui s'affiche sur votre page réalisations.

Chaque card a un bouton "Voir le projet".

Sans dynamic attributes, tous vos boutons ont le même aria-label ou, pire, aucun.

Un lecteur d'écran les voit tous identiques.

Avec la prop Attributes, vous connectez aria-label à un champ CMS qui contient le nom du client.

Résultat : "Voir le projet Cerfrance Dordogne", "Voir le projet Skinmed", chaque instance parle pour elle-même.

Cela permet d'améliorer l'accessibilité du site en utilisant des données CMS pour remplir les attributs ARIA.

2. Tracking analytics précis par composant

Vous avez un composant CTA qui apparaît à plusieurs endroits sur votre site.

Vous voulez tracer chaque clic différemment selon l'emplacement : page d'accueil, article de blog, page service.

La prop Attributes vous permet de définir data-event="clic-cta-accueil" sur l'instance en page d'accueil, et data-event="clic-cta-blog" sur les instances dans les articles, sans toucher au composant principal.

3. Données structurées connectées au CMS

Vous pouvez lier vos données CMS à des attributs personnalisés pour créer un pont entre design, code et données dynamiques, notamment pour contrôler des intégrations ou widgets qui utilisent des data attributes HTML.

Un composant de carte produit peut exposer data-price, data-sku, data-category directement depuis les champs du CMS Webflow.

Des outils comme des configurateurs JavaScript ou des trackers e-commerce en ont besoin pour fonctionner correctement.

Comment mettre en place les dynamic attributes for components

Étape 1 : entrer dans le composant principal

Double-cliquez sur une instance de votre composant depuis le canvas, ou cliquez sur "Modifier le composant" dans le panneau de droite.

Vous êtes maintenant en mode édition du composant principal.

Toute modification ici affecte toutes les instances.

Étape 2 : créer la prop Attributes sur l'élément cible

Sélectionnez l'élément interne qui doit recevoir les attributs dynamiques (un bouton, un lien, un div...).

Dans le panneau Element Settings, à côté du champ d'attribut, vous trouvez désormais l'option pour connecter ce champ à une prop.

Créez une nouvelle prop de type Attributes.

Vous pouvez créer une nouvelle propriété sur le composant principal et simultanément la connecter à un élément spécifique à l'intérieur de votre composant.

Étape 3 : configurer chaque instance

Quittez le mode édition du composant (touche Escape ou flèche retour en haut à gauche).

Sélectionnez maintenant une instance spécifique sur votre page.

Dans le panneau de droite, la prop Attributes apparaît.

Définissez les attributs que vous souhaitez pour cette instance : clé + valeur.

Chaque instance peut avoir un ensemble d'attributs totalement différent.

Étape 4 : connecter à un champ CMS (optionnel)

Si votre composant est utilisé dans une Collection List, vous pouvez connecter la valeur d'un attribut directement à un champ CMS.

Vous pouvez connecter vos données CMS à des attributs personnalisés pour créer une connexion entre design, code et données dynamiques.

Cliquez sur l'icône violette à côté du champ de valeur, puis sélectionnez le champ de votre collection.

Ce que ça change pour les équipes qui construisent sur Webflow

La logique est simple : moins de composants dupliqués, moins de code custom, moins de maintenance.

Pour une agence comme Apsodia qui construit des sites sur Webflow, ce type de mise à jour réduit directement le temps de développement sur des projets complexes, notamment ceux qui exigent une conformité accessibilité ou une connexion poussée avec des outils tiers.

Les limites à connaître

Les dynamic attributes for components ne règlent pas tout.

Certains noms d'attributs sont réservés par Webflow pour protéger les concepteurs web novices, et cette restriction s'applique toujours.

Si vous tentez de saisir un attribut réservé, Webflow vous bloquera.

Par ailleurs, la connexion au CMS reste limitée aux Collection Pages et aux Collection Lists.

Vous ne pouvez pas injecter des données CMS dans un composant placé hors d'un contexte de collection.

Enfin, la structure et les styles du composant ne peuvent être modifiés que sur le composant principal, pas sur les instances.

Les dynamic attributes s'appliquent uniquement aux attributs, pas à la mise en page ou aux styles.

En lien avec les récentes évolutions des composants Webflow

Cette mise à jour s'inscrit dans une série de publications rapprochées autour des composants.

Depuis quelques mois, Webflow a publié le Component Canvas (édition du composant principal dans un espace dédié), les props conditionnels pour afficher ou masquer des éléments selon des données, et les variantes de composants pour gérer des états visuels distincts.

Les propriétés de composant permettent de définir des éléments spécifiques à l'intérieur d'un composant qui peuvent être modifiés avec des valeurs uniques sur chaque instance.

Les dynamic attributes for components complètent ce système en ajoutant la couche HTML brute à ce qui peut déjà être configuré.

Si vous utilisez Webflow pour des projets qui intègrent de la personnalisation avancée, de l'analytics ou de l'accessibilité, c'est une mise à jour à tester sans attendre.

Notre équipe intègre ces nouvelles fonctionnalités dans les projets que nous livrons en création de site webflow.

‍