Web Components

Jean-Marc Lecarpentier

 

Web Components

Web Components est un ensemble de 4 spécifications : Custom Elements, Shadow DOM, Templates et HTML imports. Les 2 premiers sont les plus importants car ils vont permettre de définir des éléments personnalisés afin de créer se propres widgets.

Travail personnel

Expérimenter avec les Web Components

Créer un custom element

Créer une page web et lui ajouter un custom element dnr-element qui contient un titre et un paragraphe de description du DNR.

Ajouter un template

Modifier l'élément dnr-element afin qu'il soit créé à partir d'un template

Utiliser le shadow DOM

Modifier l'élément dnr-element afin qu'il soit de la forme :

<dnr-element>
    <span class="titre">ceci sera le titre</span>
    <span class="description">ceci sera la description</span>
</dnr-element>

Lors de l'instantiation de l'élément dnr-element, un shadow DOM est créé et remplit le h1 et p du template avec les données des span

Créer des widget

Formulaire d'inscription

Créer un custom element qui permet d'insérer un formulaire d'inscription en une ligne, par exemple

<registration-form action="submit.php"><registration-form>

Il faut gérer l'affichage du formulaire (vide pour commencer) et la validation Javascript des données du formulaire. On pourra tester avec un script PHP pour l'enregistrement des données reçues.

Image slider

Créer un custom element qui prend une liste d'images (dans un élément ul) et crée un slider avec celles-ci.

Créer une page de test qui utilise un import du custom element ainsi créé.

 
Tim Berners Lee, créateur de HTTP et HTML. A l'origine du Web, il dirige maintenant le W3C C'est avec Mosaic, premier navigateur graphique que le web pris réellement son essor en 1993
 
Fermer