Formation JavaScript - Intégrer les Web Components (Custom Elements)

Apprenez à créer et intégrer des Web Components (Custom Elements) en JavaScript pour développer des interfaces réutilisables, modulaires et compatibles avec tous les frameworks.

21 heures | 3 jours
Débutant
Dernière mise à jour : 07/2025
Formation JavaScript - Intégrer les Web Components (Custom Elements)

logo qualiopi
Objectifs de formation
  • Comprendre les standards Web Components et leur utilité
  • Créer des Custom Elements avec un cycle de vie complet
  • Utiliser le Shadow DOM pour isoler les styles et le DOM
  • Concevoir des composants réutilisables et modulaires
  • Intégrer des Web Components dans tout type de projet
Pré-requis à la formation
  • Connaissances en HTML/CSS indispensables.
  • Bonne maîtrise de JavaScript ES6+ et des bases du DOM.
Programme
Module 1 : Introduction aux Web Components
  • Définition et avantages des Web Components
  • Les standards W3C : Custom Elements, Shadow DOM, Templates
  • Compatibilité navigateurs et polyfills
Module 2 : Création de Custom Elements
  • Étendre HTMLElement et déclarer un élément personnalisé
  • Cycle de vie des composants (connectedCallback, attributeChangedCallback)
  • Gestion des attributs et propriétés
Module 3 : Shadow DOM et encapsulation
  • Créer des styles isolés et un DOM interne
  • Communication entre composants et accès au DOM global
  • Gérer la sécurité et l’isolation des composants
Module 4 : Templates, slots et composition
  • Utilisation des balises