Récemment, j’ai découvert un nouveau logiciel Adobe et je suis tombé sur la ligne de code import Theme from "@swc-react/theme". Cela m’a rapidement plongé dans le terrier de l’éducation au développement Web…
-
Une recherche rapide me montre que
"@swc-react/theme"est . -
Une autre recherche montre que est une implémentation particulière d’Adobe Spectrum qui utilise Le générateur de projets de.
-
Qu’est-ce que ? Eh bien, quoi que ce soit, cela repose sur quelque chose appelé .
-
Qu’est-ce que ? C’est une bibliothèque JavaScript qui s’appuie sur .
-
Au bout du terrier du lapin, on apprend que est un ensemble de fonctionnalités HTML et JavaScript modernes qui permettent la mise en œuvre de « composants », qui sont des éléments modulaires et paramétrables en HTML d’une page Web qui ont leurs propres HTML, JavaScript et CSS associés. Les composants sont généralement implémentés par des frameworks plus lourds tels que React ou Angular.
Bien sûr, peu de détails clarifiants que j’ai ajoutés dans les puces ci-dessus m’étaient clairs lors de mon premier séjour dans le terrier du lapin.
Ce qui suit est un article qui présente le contenu pertinent du terrier du lapin dans une approche plus fondamentale et « ascendante ».
« est une suite de différentes technologies [standard to HTML and JavaScript] vous permettant de créer des éléments personnalisés réutilisables – avec leurs fonctionnalités encapsulées du reste de votre code – et de les utiliser dans vos applications Web.
La « suite de différentes technologies » sont constituées de l’API JavaScript des éléments personnalisés, de l’API JavaScript Shadow DOM et de l’API Javascript des éléments personnalisés. <template> et <slot> Éléments HTML.
Éléments personnalisés (API JavaScript)
Le éléments personnalisés L’API JavaScript permet
-
extension des éléments HTML intégrés, tels que
<p>afin qu’un élément HTML étendu puisse être utilisé en HTML avec du code tel que<p is="word-counter">. (L’argument deisprécise quelle extension de<p>est utilisé.) Ceux-ci sont appelés éléments intégrés personnalisés. -
création de nouveaux éléments HTML portant de nouveaux noms de balises tels que
<custom-element>. Ceux-ci sont appelés éléments autonomes (HTML).
Un élément personnalisé est implémenté sous la forme d’une classe qui s’étend soit
-
une interface correspondant à un élément HTML, dans le cas d’une extension d’un élément HTML existant
ou
-
HTMLElementdans le cas de la création d’un nouvel élément HTML
La classe devra implémenter plusieurs « fonctions de rappel du cycle de vie ». La classe, disons Clsest ensuite transmis à window.customElementRegistry.define("my-custom-element", Cls).
Shadow DOM (API JavaScript)
Le ombre DOM L’API JavaScript permet des arborescences DOM « cachées », appelées arbres d’ombreà attacher aux éléments de l’arborescence DOM normale. Les arbres d’ombre sont masqués dans le sens où ils ne sont pas sélectionnés par des outils tels que document.querySelectorAll(). Ils permettent l’encapsulation car aucun code contenu dans une arborescence fantôme ne peut affecter la partie de l’arborescence DOM globale qui est son parent.
Les arbres d’ombre sont effectués en utilisant
<template>
Le <template> Élément HTML n’est pas réellement rendu par le navigateur. Au lieu de cela, quand template est le JavaScript Element représentant un <template> élément HTML (par exemple const template = document.querySelectorAll("#some-template")), nous sommes censés rendre manuellement* template.content. Ce rendu manuel se fait en écrivant du code tel que document.body.appendChild(template.content).
Mais quand même, à quoi ça sert ? A ce stade, tout ce que nous savons sur <template> est-ce que son utilisation nécessite le rendu manuel du HTML. Cela semble inutile !
*template.content est du type DocumentFragmentqui est une structure de données qui représente template.innerHTML. Vous pouvez lire des informations sur une situation dans laquelle vous voudriez utiliser DocumentFragment sur innerHTML . Je ne comprends pas comment utiliser DocumentFragment est largement supérieur à innerHTML dans ce scénario, mais il y a probablement un petit avantage en termes de performances.
Rainurage
<template> devient très utile lorsqu’il est associé au <slot> élément. Le <slot> L’élément nous permet de définir des parties du <template> HTML interne qui est variable afin que nous puissions ultérieurement « plug-in » du HTML personnalisé dans ces parties du <template> HTML interne.
Afin d’obtenir cette fonctionnalité de <slot>il faut effectivement utiliser <slot> aux côtés des concepts d’éléments personnalisés et de shadow DOM, car c’était ainsi <slot> a été conçu pour être utilisé.
Éléments personnalisés à fente
Nous décrivons maintenant comment <slot> est utilisé avec des éléments personnalisés, le shadow DOM et des modèles pour implémenter un élément personnalisé « à fente ».
-
Incluez du code tel que
<template id = "some-template">
...
<slot name = "some-slot"> default text </slot>
...
</template>
dans le HTML.
-
Dans la classe qui définit un élément personnalisé, écrivez un constructeur qui crée une arborescence fantôme en incluant
const shadowRoot = this.attachShadow({mode: "open"})dans le constructeur.
-
Dans le même constructeur, juste après la création de l’arbre fantôme, définissez
template.contentêtre le code HTML interne de l’arbre fantôme :shadowRoot.attachChild(template.content.cloneNode(true)).
(Pour voir un exemple de ceci, inspectez avec les outils de développement de votre navigateur.)
Nous voyons que les trois concepts d’éléments personnalisés, de shadow DOM et de modèles sont tous impliqués. (1) et (3) concernent les modèles, (2) concernent le shadow DOM et (2) et (3) apparaissent dans le constructeur de l’élément personnalisé !
Mais comment <slot> entrer en jeu ? Eh bien, supposons qu’un élément personnalisé appelé « some-element » soit configuré de la manière ci-dessus. Et puis le HTML
<some-element> </some-element>
est interprété par le navigateur comme étant le HTML interne du modèle avec le code HTML interne du modèle <slot> élément remplaçant le modèle <slot> élément. Ainsi, le navigateur affichera le HTML
... default text ...
Alternativement, le HTML
<some-element>
<div slot = "some-slot"> replacement text </div>
</some-element>
est interprété par le navigateur comme étant le HTML interne du modèle avec le code HTML interne du nouveau spécifié <slot> élément remplaçant le modèle <slot> élément. Ainsi, le navigateur affichera le HTML
... replacement text ...
Le type d’élément personnalisé ci-dessus implémente l’idée d’un composant modernece qui est
-
facilement réutilisable
-
encapsulé (dans le sens où le code d’un composant est distinct des autres composants et n’affecte pas l’état ou le comportement des autres composants)
-
permet le paramétrage du HTML avec
<slot>
Nous avons vu que l’écriture du type d’élément personnalisé ci-dessus nécessite beaucoup de passe-partout. Nous pourrions éliminer le passe-partout en écrivant une classe qui implémente les fonctionnalités modernes des composants. Le constructeur de la classe prendrait comme argument le HTML qui doit sous-tendre le composant moderne.*.
* Si <slot> fonctionnalité est utilisée, alors le HTML qui doit sous-tendre le composant moderne contiendra le même type de <slot> élément qui <template> fait ci-dessus.
Allumé
est une bibliothèque qui fournit une classe, LitElementqui met en œuvre cette notion de composant moderne. Comme le dit la documentation de Lit, l’avantage de cette approche est que, puisque les composants modernes s’appuient sur des API HTML et JavaScript standard, ils sont pris en charge par presque tous les navigateurs Web (c’est-à-dire tous les navigateurs Web prenant en charge les API HTML et JavaScript requises), et ne nécessitent aucun framework tel que Angular ou React pour s’exécuter.
Composants Web ouverts
est un site Web qui « donne un ensemble de recommandations et de valeurs par défaut » sur la façon d’écrire des composants Web modernes ». La page « Mise en route » recommande que pour commencer à développer un composant Web, vous devez utiliser leur package npm en exécutant npm init @open-wcqui génère un exemple de composant Lit.
est l’implémentation « sans framework » ou « aussi proche que possible de Vanilla JS » d’Adobe Spectrum. Les composants Web Spectrum sont des composants Lit et étendent ainsi LitElement.
Wrappers React pour les composants Web Spectrum
« est une collection de composants wrapper React pour la bibliothèque Spectrum Web Components (SWC), vous permettant d’utiliser facilement SWC dans vos applications React. Il s’appuie sur le package @lit/react pour fournir une intégration transparente entre React et la bibliothèque SWC.
Pourquoi ne pas simplement utiliser les composants React Spectrum ?
Les composants swc-react et React sont deux technologies qui implémentent l’idée d’un composant d’une manière ou d’une autre. Je pense que si nous utilisons React, ne serait-il pas plus naturel d’utiliser simplement les composants React et de ne pas importer une bibliothèque supplémentaire qui rend les composants Lit utilisables dans React ? Bien, dit :
Nous vous recommandons d’utiliser sur dans vos modules complémentaires basés sur React, car il propose actuellement un ensemble plus complet de composants qui offrent des avantages intégrés comme détaillé ci-dessus dans le et est soutenu plus activement.
Source link