Une introduction aux composants Web sans framework

Ce tutoriel décrit comment écrire des composants Web standard sans utiliser le framework JavaScript. Vous apprendrez ce qu'ils sont et comment les adopter dans vos propres projets Web. La connaissance de base de HTML5, CSS et JavaScript est requise.

Points clés

• Les composants Web permettent la création d'éléments HTML personnalisés avec des styles et des fonctionnalités d'encapsulation, réduisant les conflits et les dépendances entre les différentes parties du projet.
• Contrairement aux frameworks JavaScript, les composants Web sont légers, ne nécessitent pas de bibliothèques externes et sont conçues pour être à l'épreuve des futurs et peuvent fonctionner dans une variété de cadres et de navigateurs.
• Shadow Dom fournit des styles portée et l'isolement Dom pour empêcher les styles de fuir à l'extérieur du composant et de maintenir une séparation claire entre les styles internes et globaux.
• Les composants Web peuvent être améliorés avec des modèles HTML et des emplacements, offrant une flexibilité pour la projection et la réutilisabilité de contenu sans modifier le code JavaScript pour différents instances de composants.
• Declarative Shadow Dom est une fonctionnalité émergente qui permet de construire des modèles d'ombre à partir des modèles côté serveur, d'améliorer les performances en réduisant les décalages de mise en page et en scintillant du contenu non corporel.
• Bien que les composants Web présentent de nombreux avantages, ils ont également une courbe d'apprentissage et manquent de certaines des fonctionnalités intégrées fournies par le cadre complet, tels que la liaison des données et les outils de gestion de l'État.

Que sont les composants Web?

Idéalement, votre projet de développement doit utiliser des modules simples et indépendants. Chaque module doit avoir une responsabilité unique claire. Le code est encapsulé: il vous suffit de savoir ce qui sera la sortie compte tenu d'un ensemble de paramètres d'entrée. D'autres développeurs n'ont pas besoin de vérifier la mise en œuvre (sauf s'il y a des erreurs bien sûr).

La plupart des langues encouragent l'utilisation des modules et du code réutilisable, mais le développement du navigateur nécessite un mélange de HTML, CSS et JavaScript pour rendre le contenu, les styles et les fonctionnalités. Le code connexe peut être divisé en plusieurs fichiers et peut être confronté à des manières inattendues.

Les frameworks et bibliothèques JavaScript tels que React, Vue, Svelte et Angular ont atténué certaines des difficultés en introduisant leurs propres méthodes de composante. HTML, CSS et JavaScript connexes peuvent être combinés en un seul fichier. Malheureusement:

• C'est une autre chose à apprendre
• Framework continuera d'évoluer, et les mises à jour conduiront souvent à une refactorisation de code ou même à la réécriture
• Les composants écrits dans un cadre ne fonctionnent généralement pas dans un autre cadre, et
• Le cadre peut être énorme et limité par ce qui est possible dans JavaScript

Il y a dix ans, de nombreux concepts introduits par jQuery ont été ajoutés au navigateur (par exemple, queySelector, la plus proche, la liste de classe, etc.). Aujourd'hui, les fournisseurs implémentent des composants Web qui s'exécutent nativement dans le navigateur sans frameworks.

Cela prend du temps. Alex Russell a fait sa recommandation initiale en 2011. Le cadre polymère de Google (polyfill) est sorti en 2013, mais il n'a fallu que trois ans pour venir des implémentations natives dans Chrome et Safari. Après quelques négociations difficiles, Firefox a ajouté un soutien en 2018, suivi par Edge (la version Chromium) en 2020.

Comment fonctionnent les composants Web?

Considérons les éléments de HTML5 <video></video> et <audio></audio> qui permettent aux utilisateurs de jouer, d'arrêter, de rembobiner et de média rapidement à l'aide d'une série de boutons et de contrôles internes. Par défaut, le navigateur gère la disposition, le style et les fonctionnalités.

Le composant Web

vous permet d'ajouter vos propres éléments HTML personnalisés - par exemple, la balise <word-count></word-count> pour calculer le nombre de mots dans la page. Le nom de l'élément doit contenir un trait d'union (-) pour s'assurer qu'il ne confronte jamais à l'élément HTML officiel.

Ensuite, enregistrez une classe JavaScript ES2015 pour votre élément personnalisé. Il peut attacher des éléments DOM tels que des boutons, des titres, des paragraphes, etc. Pour vous assurer que ces éléments ne sont pas en conflit avec le reste de la page, vous pouvez les attacher à un DOM d'ombre interne avec son propre style de portée. Vous pouvez le considérer comme un petit <iframe></iframe>, bien que les propriétés CSS telles que les polices et les couleurs soient héritées par la cascade.

Enfin, vous pouvez attacher le contenu au Dom Shadow à l'aide de modèles HTML réutilisables qui fournissent une configuration via la balise <slot></slot>.

Par rapport aux cadres, les composants Web standard sont relativement simples. Ils n'incluent pas de fonctionnalités telles que la liaison des données et la gestion de l'État, mais les composants Web ont des avantages convaincants:

• Ils sont légers et rapides
• Ils peuvent implémenter des fonctions que JavaScript ne peut pas atteindre (comme l'ombre DOM)
• Ils peuvent travailler dans n'importe quel framework JavaScript
• Ils seront soutenus dans les années (sinon des décennies) à venir

Votre premier composant Web

Pour démarrer, ajoutez l'élément <hello-world></hello-world> à n'importe quelle page Web. (La marque de fin est cruciale: vous ne pouvez pas définir une marque <hello-world></hello-world> auto-clôturée.)

Créez un fichier de script appelé hello-world.js et chargez-le à partir de la même page HTML (le module ES retarde automatiquement afin qu'il puisse être placé n'importe où - mais plus tôt dans la page, mieux c'est):

<code class="language-html">

<hello-world></hello-world></code>

Créez une classe Helloworld dans votre fichier de script:

<code class="language-javascript">// <hello-world> Web Component
class HelloWorld extends HTMLElement {

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }

}

// register <hello-world> with the HelloWorld class
customElements.define( 'hello-world', HelloWorld );</hello-world></hello-world></code>

Le composant Web doit étendre l'interface HTMLelement, qui implémente les propriétés et méthodes par défaut de chaque élément HTML.

Remarque: Firefox peut étendre des éléments spécifiques, tels que HTMLIMAGEElement et HTMLButtonElement. Cependant, ces éléments ne soutiennent pas Shadow Dom, et cette pratique n'est pas soutenue par d'autres navigateurs.

Chaque fois qu'un élément personnalisé est ajouté à un document, le navigateur exécute la méthode ConnectedCallback (). Dans ce cas, il modifie le texte interne. (Aucun Dom Shadow n'est utilisé.)

Le reste des parties est similaire au texte d'origine, sauf que la langue et l'expression sont ajustées pour atteindre le but de la pseudo-originalité. En raison des limitations de l'espace, je ne peux pas traduire le reste dans son intégralité, mais vous pouvez continuer avec la pseudo-originalité dans ce modèle. Veuillez noter que le format et la position de l'image restent inchangés.

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!