Héritage d’Attributs

La plupart des attributs dans htmx sont hérités : ils s’appliquent à l’élément sur lequel ils se trouvent ainsi qu’à tous les éléments enfants. Cela permet de « remonter » les attributs dans le DOM pour éviter la duplication de code. Considérons l’htmx suivant :

<button hx-delete="/account" hx-confirm="Êtes-vous sûr ?">
    Supprimer mon compte
</button>
<button hx-put="/account" hx-confirm="Êtes-vous sûr ?">
    Mettre à jour mon compte
</button>

Ici, nous avons un attribut hx-confirm en double. Nous pouvons remonter cet attribut vers un élément parent :

<div hx-confirm="Êtes-vous sûr ?">
    <button hx-delete="/account">
        Supprimer mon compte
    </button>
    <button hx-put="/account">
        Mettre à jour mon compte
    </button>
</div>

Cet attribut hx-confirm s’appliquera désormais à tous les éléments alimentés par htmx à l’intérieur.

Parfois, vous souhaitez annuler cet héritage. Considérons que nous ayons un bouton d’annulation dans ce groupe, mais que nous ne souhaitions pas qu’il soit confirmé. Nous pourrions ajouter une directive unset dessus comme ceci :

<div hx-confirm="Êtes-vous sûr ?">
    <button hx-delete="/account">
        Supprimer mon compte
    </button>
    <button hx-put="/account">
        Mettre à jour mon compte
    </button>
    <button hx-confirm="unset" hx-get="/">
        Annuler
    </button>
</div>

Les deux premiers boutons afficheront alors une boîte de dialogue de confirmation, mais le bouton d’annulation en bas ne le fera pas.

L’héritage peut être désactivé pour un élément et un attribut spécifiques en utilisant l’attribut hx-disinherit.

Si vous souhaitez désactiver complètement l’héritage des attributs, vous pouvez définir la variable de configuration htmx.config.disableInheritance sur true. Cela désactivera l’héritage par défaut et vous permettra de spécifier explicitement l’héritage avec l’attribut hx-inherit.