Définissez un nom unique avec un tiret (ex: ma-carte).
Ajoutez des attributs personnalisés que vous pouvez utiliser dans votre composant.
Code HTML du composant, utilisez {{nomAttribut}} pour insérer les attributs.
CSS personnalisé pour styliser votre composant, vous pouvez utiliser les attributs avec var(--nomAttribut)..
Code JS exécuté lorsque votre composant est ajouté à la page.
Code JS exécuté chaque fois que votre composant est mis à jour ou rendu.
Ajoutez des méthodes JS supplémentaires appelables directement sur votre composant.
Le nom du composant doit obligatoirement contenir un tiret (« - »), par exemple mon-widget. Ce nom sera utilisé directement dans votre HTML.
Ce champ permet de décrire brièvement l’objectif de votre Web Component. Utile pour vous y retrouver ou pour présenter votre composant dans une galerie.
Cette option vous permet d’ajouter des attributs personnalisés (variables) dans votre composant, utilisables dynamiquement dans votre HTML, CSS et JavaScript. Vous pouvez choisir si l'attribut apparaît directement dans la balise HTML.
Utilisez {{nomAttribut}} dans votre HTML pour remplacer dynamiquement par la valeur d’un attribut défini précédemment.
Vous pouvez accéder aux attributs dans votre CSS en utilisant la notation var(--nomAttribut). Le générateur le fera automatiquement pour vous.
Le code placé ici s’exécute automatiquement dès que votre composant est ajouté à la page, parfait pour initialiser des actions ou appeler des API externes.
Ce code JavaScript s’exécute à chaque rendu ou mise à jour du composant (lorsque les attributs changent). Idéal pour ajuster dynamiquement l’affichage.