Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

1. Introduction aux Web Components

Les Web Components désignent un standard qui permet aux développeurs de créer des sections complètement autonomes au sein de leurs pages web. On peut par exemple créer un composant web qui gère l’affichage d’articles dans notre application : ce composant web fonctionnera indépendamment du reste de la page, il possèdera son propre code HTML, son propre code CSS et son propre code JavaScript, encapsulé dans le composant web. Il faudra ensuite insérer ce composant web dans la page principale de notre application pour indiquer que, à tel endroit, nous voulons afficher des articles grâce à ce composant web.

On peut voir les Web Components comme des widgets réutilisables.

Les Web Components utilisent des capacités standards, nouvelles ou en cours de développement des navigateurs. Il s’agit d’une technologie récente qui n’est pas encore supportée par tous les navigateurs. Pour les utiliser dès aujourd’hui, nous devrons utiliser des polyfills pour combler les lacunes de couverture des navigateurs.

Un polyfill est un ensemble de fonctions, souvent sous forme de scripts JavaScript, permettant de simuler sur un navigateur web ancien des fonctionnalités qui ne sont pas nativement disponibles.

Les Web Components sont composés de quatre technologies différentes, qui peuvent chacune être utilisées séparément, mais qui une fois assemblées forment le standard des Web Components :

  • Les éléments personnalisés (Custom Elements) ;
  • Le DOM de l’ombre (Shadow DOM) ;
  • Les templates HTML (HTML Templates) ;
  • Les imports HTML (HTML Imports).

Pour ceux qui ne s’en souviennent plus, le DOM est une représentation de votre code HTML sous forme d’arbre. Ainsi un élément <ul> a des éléments fils <li>. L’élément racine du DOM est donc la balise <html>.      

Je vais vous présenter chacune de ces technologies : le plus important est que vous compreniez pourquoi telle ou telle technologie a été inventée et à quoi elle sert.

Par ailleurs, je vous conseille vivement de lire ce chapitre de haut en bas, il y a un certain enchaînement logique entre tous ces éléments !