Editor X : Ajouter un élément personnalisé à votre site

Améliorez votre site avec vos propres fonctionnalités de design et capacités CSS à l'aide d'éléments personnalisés. Vous pouvez ajouter n'importe quel composant JavaScript en reliant un élément personnalisé à une URL de serveur ou à un fichier Velo. Si nécessaire, vous pouvez définir plus d'attributs directement à partir de l'Editor X. 

Les éléments personnalisés vous permettent d'utiliser vos propres balises HTML sur votre site Editor X. Ces éléments fonctionnent sur tous les navigateurs pris en charge et peuvent être utilisés avec n'importe quelle bibliothèque ou framework JavaScript ES6 qui fonctionne avec HTML 5.

Ajoutez autant d'éléments personnalisés que vous le souhaitez à votre site. Après avoir fait glisser un élément personnalisé sur votre page, définissez sa source (URL du serveur ou un fichier Velo) et donnez-lui un nom de balise qui apparaîtra dans le registre de la page.

Utiliser le panneau Inspecteur  pour vous assurer que votre élément personnalisé apparaît correctement dans tous les points de rupture – vous pouvez ajuster sa taille, son ancrage, son alignement et plus encore. 

Ajustez davantage les propriétés et le comportement de votre élément en définissant des attributs HTML. Le panneau Attributs des éléments vous permet d'ajouter, de modifier et de supprimer des attributs directement à partir de l'Editor X, afin que vous n'ayez pas à accéder au code réel.

Vous trouverez ci-dessous un exemple d'ajout d'un élément personnalisé de base à votre site. Les instructions expliquent comment ajouter le texte « Bonjour à tous » sur votre site.

Tout d'abord, vous devez créer et coder l'élément et son comportement dans un fichier JavaScript. 

Ensuite, définissez la classe d'élément personnalisée.

Dans cet exemple, nous l'avons définie comme BonjouràTous et nous utiliserons le même nom lors de l'inscription de l'élément personnalisé. La fonction connectedCallback () ci-dessous est une fonction de rappel du cycle de vie qui se déclenche automatiquement lorsque l'élément est attaché au DOM.

Après avoir défini la classe d'élément personnalisé, nous l'enregistrons avec la méthode customElements.define(name, class). 

Lorsque vous ajoutez l'élément personnalisé à votre site, saisissez le nom enregistré comme Nom de la balise. Une fois enregistré, l'élément personnalisé peut être utilisé sur votre site.