x-html

x-html définit la propriété « innerHTML » d'un élément avec le résultat d'une expression donnée.

Attention : n'utilisez cette directive que sur du contenu de confiance, et jamais sur du contenu fourni par un utilisateur. Afficher dynamiquement du HTML provenant de tiers peut facilement entraîner des failles XSS.

Voici un exemple basique d'utilisation de x-html pour afficher le nom d'utilisateur.

<div x-data="{ username: '<strong>calebporzio</strong>' }">
    Nom d'utilisateur : <span x-html="username"></span>
</div>

Le HTML interne de la balise <span> sera désormais « <strong>calebporzio</strong> ».

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev