Composants Web
Les composants web sont un outil puissant dans le développement web moderne, permettant aux développeurs de créer des éléments HTML réutilisables et encapsulés. Dans ce guide, nous plongerons profondément dans l'univers des composants web, en fournissant de nombreux exemples de code et des explications détaillées pour vous aider à maîtriser cet aspect essentiel de JavaScript.
Introduction aux composants web
Les composants web sont un ensemble d'APIs de la plateforme web qui vous permettent de créer de nouvelles balises HTML personnalisées, réutilisables et encapsulées à utiliser dans les pages web et les applications web. Les technologies principales utilisées dans les composants web sont les Custom Elements, le Shadow DOM et les HTML Templates.
Custom Elements
Les Custom Elements définissent de nouvelles balises HTML et leur comportement. Ces éléments peuvent être utilisés comme n'importe quelle balise HTML standard, mais avec un comportement et des styles personnalisés.
<div>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<p>Hello, World!</p>';
}
}
customElements.define('my-element', MyElement);
</script>
<my-element></my-element>
</div>Cet extrait de code montre comment créer un élément HTML personnalisé appelé my-element. La classe MyElement étend HTMLElement, attache un shadow DOM pour encapsuler son contenu, et insère un simple paragraphe avec le texte "Hello, World!".
Shadow DOM
Le Shadow DOM fournit une encapsulation pour vos éléments personnalisés. Il vous permet de limiter les styles et les scripts au scope de l'élément lui-même.
<div>
<script>
class ShadowElement extends HTMLElement {
constructor() {
super();
let shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
p { color: blue; }
</style>
<p>Shadow DOM content</p>
`;
}
}
customElements.define('shadow-element', ShadowElement);
</script>
<shadow-element></shadow-element>
</div>Dans cet exemple, la classe ShadowElement étend HTMLElement et attache une racine shadow à l'élément. Le paramètre mode: 'open' spécifie que le shadow DOM est accessible via JavaScript. Lorsque mode est défini sur 'open', la racine shadow peut être accédée à l'aide de la propriété element.shadowRoot. Si mode est défini sur 'closed', la racine shadow n'est pas accessible de l'extérieur, ce qui renforce l'encapsulation et empêche les scripts externes de manipuler directement le shadow DOM.
Au sein du shadow DOM, nous définissons des styles et du contenu HTML. Les styles (dans ce cas, un paragraphe avec du texte bleu) sont limités au shadow DOM, garantissant qu'ils n'affectent aucun autre élément de la page. Cette encapsulation est bénéfique pour créer des composants réutilisables avec un style et un comportement cohérents, quel que soit le contexte dans lequel ils sont utilisés.
WARNING
Utilisez des styles locaux au sein du Shadow DOM pour éviter les fuites de styles et garantir que les styles des composants soient limités à leur propre scope.
HTML Templates
Les HTML Templates vous permettent de définir des blocs HTML réutilisables qui peuvent être instanciés au moment de l'exécution.
<div>
<template id="my-template">
<style>
p { color: red; }
</style>
<p>This is a template content</p>
</template>
<script>
const template = document.getElementById('my-template').content;
document.body.appendChild(template.cloneNode(true));
</script>
</div>Cet exemple montre comment utiliser les HTML Templates. La balise <template> contient du HTML et des styles qui ne sont pas rendus immédiatement. Le script clone le contenu du template et l'ajoute au corps du document, le rendant ainsi visible.
Création de votre premier composant web
Parcourons ensemble le processus de création d'un composant web entièrement fonctionnel qui peut être utilisé dans différents projets.
Étape 1 : Définir le composant
Créez une nouvelle classe qui étend HTMLElement.
<div>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = 'Hello, World!'
}
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>
</div>Cet extrait pose les bases d'un composant web appelé my-component. Il définit une classe qui étend HTMLElement et attache un shadow DOM, le préparant pour une personnalisation ultérieure.
Étape 2 : Ajouter des styles et des templates
Utilisez le Shadow DOM pour encapsuler les styles et les templates.
<div>
<script>
class MyStyledComponent extends HTMLElement {
constructor() {
super();
let shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
p { font-size: 20px; color: green; }
</style>
<p>This is my styled component!</p>
`;
}
}
customElements.define('my-styled-component', MyStyledComponent);
</script>
<my-styled-component></my-styled-component>
</div>Cet extrait améliore my-styled-component en ajoutant des styles limités au scope à l'intérieur du shadow DOM. Le paragraphe à l'intérieur du composant est stylisé avec une couleur verte et une taille de police augmentée.
Étape 3 : Ajouter de l'interactivité
Ajoutez du JavaScript pour rendre votre composant interactif.
<div>
<script>
class InteractiveComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
p { font-size: 20px; }
</style>
<p>This is interactive!</p>
<button>Click me</button>
`;
this.shadowRoot.querySelector('button').addEventListener('click', () => {
this.shadowRoot.querySelector('p').textContent = 'You clicked!';
});
}
}
customElements.define('interactive-component', InteractiveComponent);
</script>
<interactive-component></interactive-component>
</div>Cet exemple montre comment rendre un composant web interactif. L'InteractiveComponent inclut un bouton qui, lors du clic, modifie le contenu textuel d'un paragraphe à l'intérieur du composant.
Techniques avancées pour les composants web
Callbacks du cycle de vie
Les éléments personnalisés disposent de callbacks de cycle de vie qui vous permettent d'exécuter du code lors de phases spécifiques de la vie d'un élément.
<div>
<script>
class LifecycleComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = '<p>Element added to page.</p>';
}
disconnectedCallback() {
console.log('Element removed from page.');
}
}
customElements.define('lifecycle-component', LifecycleComponent);
</script>
<lifecycle-component></lifecycle-component>
</div>Cet extrait démontre l'utilisation des callbacks de cycle de vie dans les composants web. Le LifecycleComponent met à jour son contenu lorsqu'il est ajouté à la page et affiche un message dans la console lorsqu'il est supprimé.
Gestion des changements d'attributs
Réagissez aux changements des attributs d'un élément en définissant le tableau observedAttributes et en implémentant la méthode attributeChangedCallback.
<div>
<script>
class AttributeComponent extends HTMLElement {
static get observedAttributes() {
return ['data-text'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<p></p>';
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'data-text') {
this.shadowRoot.querySelector('p').textContent = newValue;
}
}
}
customElements.define('attribute-component', AttributeComponent);
</script>
<attribute-component data-text="Initial text"></attribute-component>
<script>
const element = document.querySelector('attribute-component');
setTimeout(() => {
element.setAttribute('data-text', 'Updated text');
}, 2000);
</script>
</div>Cet exemple montre comment gérer les changements d'attributs dans un composant web. L'AttributeComponent met à jour son contenu interne en fonction des modifications de l'attribut data-text.
Bonnes pratiques pour les composants web
Utilisez le Shadow DOM à bon escient
Encapsulez les styles et les scripts à l'intérieur du Shadow DOM pour éviter les conflits avec les autres éléments de la page.
Respectez les conventions de nommage
Les éléments personnalisés doivent contenir un tiret dans leur nom pour éviter les conflits avec les éléments HTML standards.
Gardez les composants modulaires
Créez des composants petits et réutilisables pour maintenir votre base de code évolutive et facile à entretenir.
Évitez les styles globaux
Utilisez des styles locaux au sein du Shadow DOM pour éviter les fuites de styles et garantir que les styles des composants soient limités à leur propre scope.
Documentation et tests
Documentez bien vos composants et rédigez des tests pour vous assurer qu'ils fonctionnent comme prévu sur différents navigateurs et cas d'utilisation.
Conclusion
Les composants web sont une fonctionnalité polyvalente et puissante dans le développement web moderne, permettant la création d'éléments personnalisés réutilisables et encapsulés. En comprenant et en utilisant les Custom Elements, le Shadow DOM et les HTML Templates, vous pouvez créer des applications web modulaires, maintenables et évolutives. Ce guide vous a fourni les connaissances et les exemples nécessaires pour débuter avec les composants web, vous assurant de pouvoir les implémenter efficacement dans vos projets.
Practice
Laquelle des affirmations suivantes concernant les composants web est correcte ?