recherche

Maison >interface Web >tutoriel CSS >Construire des composants Web personnalisés avec X-Tag

Construire des composants Web personnalisés avec X-Tag

Christopher Nolan
Christopher Nolanoriginal
2025-02-23 08:26:15200parcourir

Building Custom Web Components with X-Tag

Construire des composants Web personnalisés avec X-Tag

Les plats clés

  • X-Tag, une bibliothèque JavaScript soutenue par Microsoft, fournit une interface compacte et riche en fonctionnalités pour le développement de composants Web rapide, en se concentrant principalement sur l'API des éléments personnalisés
  • X-Tag était à l'origine un projet de Mozilla, mais il s'agit maintenant d'un projet à dos de Microsoft, similaire à la façon dont Google soutient le cadre du polymère.
  • La création d'un élément personnalisé avec X-Tag est complètement motivée par JavaScript, en utilisant la méthode xtag.register (). Ce processus consiste à définir le cycle de vie de l'élément personnalisé, les accessoires, les méthodes et les événements.
  • X-TAG fournit une API plus simple pour la mise en œuvre d'éléments personnalisés par rapport au polymère, ce qui en fait un choix approprié pour les développeurs visant à garder leur configuration légère et flexible. Cependant, il n'offre pas les caractéristiques complexes que fait le polymère.

Après les solutions de Google et Mozilla pour les composants Web, il est maintenant au tour de Microsoft de saisir cet espace avec leur version publique de la bibliothèque X-Tag. Le site officiel le définit comme suit:

X-TAG est une bibliothèque JavaScript en prise en charge de Microsoft, Open Source qui enveloppe la famille d'API des composants Web standard W3C pour fournir une interface compacte riche en fonctionnalités pour le développement rapide des composants. Bien que X-Tag propose des crochets de fonctionnalités pour toutes les API des composants Web (éléments personnalisés, Shadow DOM, modèles et importations HTML), il nécessite uniquement la prise en charge des éléments personnalisés pour fonctionner. En l'absence de support d'éléments personnalisés natifs, X-Tag utilise un ensemble de polyfills partagés avec le cadre polymère de Google.

En d'autres termes, X-Tag est à Microsoft ce que le polymère est à Google. La seule chose commune à les deux est le polyfill sous-jacent qui permet la prise en charge des composants Web dans les navigateurs non soutenus.

En quoi le X-Tag est-il différent de Polymer?

Polymer combine les quatre technologies de composants Web, à savoir les importations HTML, les éléments personnalisés, les modèles Shadow Dom et HTML en un seul package. Il fournit au développeur une API facile à utiliser pour créer des composants Web personnalisés. D'un autre côté, X-Tag fournit uniquement l'API d'élément personnalisé pour créer des composants Web personnalisés. Bien sûr, vous pouvez également utiliser d'autres API de composants Web en conjonction avec la bibliothèque X-Tag.

n'est pas X-Tag, un projet Mozilla?

Oui, mais ce n'est plus le cas. Après quelques fouilles, j'ai réussi à découvrir que le développeur original du projet X-Tag, Daniel Buchner, travaillait à Mozilla lorsqu'il a créé la bibliothèque. Mais depuis lors, il a déménagé à Microsoft et a poursuivi le projet. De plus, il a été le seul contributeur à la bibliothèque avec l'aide d'un ex-Mozillian. Par conséquent, c'est maintenant un projet soutenu par Microsoft fondé par un ex-Mozillien.

Pour commencer avec X-Tag

Dans cet article, nous créerons un élément personnalisé à l'aide de la bibliothèque X-Tag pour intégrer une vue sur Google Map Street en utilisant le balisage suivant: 

<span><span><span><google-map</span> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></span><span><span></google-map</span>></span></span>

L'élément personnalisé aura deux attributs, la latitude et la longitude, pour spécifier les coordonnées d'un emplacement. Étant donné que ces attributs sont facultatifs, nous attribuerons également des valeurs par défaut pour chacun d'eux au cas où le développeur ne les définirons pas dans le balisage.

Commençons par inclure la bibliothèque JavaScript X-Tag dans le de notre document. 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script</span> src<span>="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Il est important d'inclure la bibliothèque X-Tag dans le du document. C'est pour qu'il soit téléchargé et analysé complètement avant que le moteur de rendu ne rencontre le balisage de l'élément personnalisé que nous utiliserons à l'intérieur du .

Définition de l'élément personnalisé

Contrairement à Polymer, le processus de création d'un élément personnalisé avec X-Tag est complètement axé sur JavaScript. La bibliothèque X-Tag fournit un tas de méthodes, rappels et propriétés utiles pour définir un comportement personnalisé pour notre élément. Un squelette typique pour créer un élément personnalisé avec X-Tag ressemble à ce qui suit: 

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>
  • registre () - Il s'agit de la méthode la plus importante de la bibliothèque. Il accepte le nom de l'élément personnalisé comme le premier argument suivi de la définition d'objet. Comme son nom l'indique, il est responsable de l'enregistrement de l'élément personnalisé dans le dom.
  • Contenu - Très souvent, l'élément personnalisé peut nécessiter une majoration supplémentaire pour la structure ou la présentation. Cela accepte une chaîne HTML ou une chaîne de commentaires multiline pour injecter le balisage dans le dom.
  • Le cycle de vie - il contient des méthodes de rappel utiles, conçues pour cibler différentes étapes du cycle de vie de l'élément personnalisé.
  • Accessors - Cela fournit une interface commune pour accéder aux attributs d'objets, aux setters et aux getters, et les lier avec les attributs HTML correspondants. Lorsque les attributs sont liés à un Getter / Setter, leurs États restent toujours en synchronisation
  • Méthodes - L'élément personnalisé aura probablement besoin de certaines de leurs propres méthodes uniques pour fournir les fonctionnalités souhaitées. Ajoutez simplement un objet de méthodes à l'objet de définition XTAG.Register () de niveau supérieur et incluez toutes les méthodes définies par l'utilisateur.
  • Événements - Ceci est responsable de l'attachement des événements à l'élément personnalisé. Les clés de cet objet sont les noms des événements que vous souhaitez attacher à l'élément personnalisé comme TAP, FOCUS etc.

L'idée de base est d'intégrer la carte Google à l'aide d'un iframe et de spécifier l'URL SRC dans le format suivant: 

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><API_KEY</span>></span>&location=<span><span><LATITUDE</span>></span>,<span><span><LONGITUDE</span>></span></span>

Pour obtenir l'API_KEY, suivez les étapes décrites ici. Une fois que vous aurez l'API_KEY, nous créerons un iframe dans la méthode de rappel créée de l'objet de cycle de vie et spécifierons la propriété SRC au format ci-dessus. 

<span><span><span><google-map</span> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></span><span><span></google-map</span>></span></span>

Le code ci-dessus fonctionne, mais nous devons nous débarrasser des valeurs de coordonnées codées durs dans iframe.src et à la place des valeurs directement à partir des attributs d'élément personnalisés. Pour ce faire, nous utiliserons l'objet Accessors, avec les noms d'attribut formant les clés. Nous les lions avec les attributs HTML en déclarant les attributs: {}. 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script</span> src<span>="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Nous pouvons ensuite utiliser ces variables directement tout en spécifiant l'URL Src: 

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

Appliquer les touches de finition

Le style d'un élément personnalisé est similaire au style de toute autre balise HTML. Les classes, les identifiants et les sélecteurs d'attribut fonctionnent comme prévu avec les éléments personnalisés. Par exemple, nous allons ajouter un box-shadow et une frontière radiale à notre élément personnalisé nouvellement créé. 

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><API_KEY</span>></span>&location=<span><span><LATITUDE</span>></span>,<span><span><LONGITUDE</span>></span></span>

L'utilisation de l'élément personnalisé est désormais aussi simple que d'inclure le balisage suivant dans le

: 
<span>// Insert your API key here
</span><span>var API_KEY = <API_KEY>;
</span>
xtag<span>.register('google-map', {
</span>  <span>lifecycle: {
</span>    <span>created: function() { 
</span>      <span>var iframe = document.createElement('iframe');
</span>      iframe<span>.width = 600;
</span>      iframe<span>.height = 600;
</span>      iframe<span>.frameBorder = 0;
</span>      iframe<span>.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
</span>                    <span>API_KEY + '&location=40.7553231,35.3434';
</span>      <span>this.appendChild(iframe);
</span>    <span>}
</span>  <span>}
</span><span>});</span>

Le résultat final est visible dans le codepen ci-dessous:

Voir le Pen X-Tag Élément personnalisé par SitePoint (@SitePoint) sur Codepen.

Bien que la prise en charge du navigateur pour les composants Web soit un peu sommaire, notre démo utilisant la bibliothèque X-Tag avec le polyfill devrait fonctionner sur tous les navigateurs modernes, y compris IE9 et supérieur.

Réflexions finales

En comparaison avec le polymère, X-Tag fournit une API beaucoup plus simple pour comprendre et mettre en œuvre des éléments personnalisés, principalement en raison du manque de fonctionnalités complexes de polymère. Si vous avez l'intention de garder votre lumière de configuration et votre flexible, et que vous n'avez pas un bon cas d'utilisation pour les autres API des composants Web, alors X-Tag semble certainement être le bon candidat pour le travail.

Questions fréquemment posées (FAQ) sur la création de composants Web personnalisés avec X-Tag

Qu'est-ce que X-Tag et pourquoi est-il important dans le développement Web?

X-Tag est une petite bibliothèque JavaScript qui simplifie la création d'éléments HTML personnalisés et réutilisables. Cela fait partie de la suite de technologies Web Components, qui comprend également des modèles Shadow Dom, des modèles HTML et des éléments personnalisés. X-Tag est important dans le développement Web car il permet aux développeurs de créer leurs propres éléments HTML, d'encapsuler leur code et de garder leur base de code propre et maintenable. Il favorise également la réutilisation du code, qui peut accélérer considérablement le processus de développement.

En quoi X-Tag diffère-t-il des autres bibliothèques de composants Web?

X-Tag est unique dans sa simplicité et sa facilité de facilité de utiliser. Contrairement à d'autres bibliothèques, X-Tag ne nécessite aucune étape de construction ou transpilation, et il a une très petite empreinte. Il dispose également d'une API simple et intuitive qui facilite la définition des éléments personnalisés et de leur comportement. De plus, X-Tag est compatible avec tous les navigateurs modernes et peut être utilisé aux côtés d'autres bibliothèques et frameworks.

Puis-je utiliser X-Tag avec d'autres bibliothèques ou frameworks JavaScript?

Oui, X-Tag est conçu pour être utilisé avec n'importe quelle bibliothèque ou cadre JavaScript. Il n'impose aucune restriction ou des modèles architecturaux spécifiques, vous pouvez donc facilement l'intégrer dans vos projets existants. Que vous utilisiez jQuery, React, Angular ou Vue.js, vous pouvez utiliser X-Tag pour créer des éléments personnalisés qui peuvent être réutilisés sur votre application.

Comment définir un élément personnalisé avec X- Tag?

La définition d'un élément personnalisé avec X-Tag est simple. Vous appelez simplement la fonction XTAG.Register, en passant le nom de votre élément personnalisé et un objet qui définit son comportement. Cet objet peut inclure des méthodes de cycle de vie, des accessoires et des gestionnaires d'événements. Voici un exemple de base:

xtag.register ('my-element', {
lifecycle: {
créé: function () {
this.textContent = 'Hello, world!' ;
}
}
});

Quelles sont les méthodes de cycle de vie dans X-Tag?

Les méthodes de cycle de vie sont des méthodes spéciales qui sont appelées à différentes étapes de la vie d'un élément personnalisé. X-Tag prend en charge quatre méthodes de cycle de vie: créé, inséré, supprimé et attribué. Ces méthodes vous permettent d'effectuer des actions spécifiques lorsqu'un élément est créé, ajouté au DOM, supprimé du DOM, ou lorsque l'un de ses attributs change.

Comment gérer les événements avec X-Tag?

X-Tag fournit un moyen simple de gérer les événements sur vos éléments personnalisés. Vous pouvez définir les gestionnaires d'événements dans l'objet Events lors de l'enregistrement de votre élément. Par exemple, pour gérer un événement de clic, vous feriez quelque chose comme ceci:

xtag.register ('my-element', {
événements: {
cliquez: fonction (e) {
console.log ('élément cliqué!');
}
}
});

Éléments?

Oui, X-Tag prend en charge la création d'éléments Shadow Dom. Cela vous permet d'encapsuler les styles et le balisage de votre élément, en les gardant séparés du reste de votre document. Pour créer une racine d'ombre, vous pouvez utiliser la méthode this.createShAdOwroot () dans la méthode du cycle de vie créé de votre élément.

Comment puis-je styliser mes éléments personnalisés?

Vous pouvez styliser vos éléments personnalisés simplement simplement Comme tous les autres éléments HTML, en utilisant CSS. Si votre élément utilise Shadow Dom, vous pouvez inclure une balise

Puis-je utiliser X-Tag pour créer des éléments de formulaire personnalisés?

Oui, X-Tag peut être utilisé pour créer des éléments de formulaire personnalisés. Cependant, gardez à l'esprit que les éléments de formulaire personnalisés ne participent pas à la validation de soumission ou de contrainte par défaut. Vous devrez fournir votre propre logique pour ces fonctionnalités.

est-il toujours maintenu et soutenu?

Depuis le moment de l'écriture, X-Tag n'est pas activement maintenu. La dernière version a eu lieu en 2017. Cependant, la bibliothèque est stable et peut toujours être utilisée dans des projets. Si vous rencontrez des problèmes ou avez besoin de nouvelles fonctionnalités, vous devrez peut-être les implémenter vous-même ou envisager d'utiliser une bibliothèque différente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery css html angular String Object define if for while format include require register using public Interface Attribute Property Accessors Event map JS console function default dom this location border idea microsoft Access iframe Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Qu'est-ce qui est nouveau dans la fondation 6?Article suivant：Qu'est-ce qui est nouveau dans la fondation 6?

Articles Liés

Voir plus