MIF38 - CM12 : Web Components

Lionel Médini

Généralités

Objectif global

Introduire la Programmation Orientée-Composants (POC) côté client

Principes

  • Un ensemble de standards pour créer et réutiliser des widgets (composants)
    • interopérables
    • réutilisables
    • encapsulables les uns dans les autres

Particularités

  • Initiative de Google
  • Peu d'implémentations
  • Specs sur le site du W3C obsolète
  • Utiliser les Editor's Draft (sauf templates)

Contenu

  • Web Component : terme chapeau pour plusieurs specs
    • Shadow DOM : permet de “mélanger” des arbres DOM (glue)
    • HTML templates : mécanisme de templating pour l'insertion de contenus personnalisés
    • Custom elements :
      • Créer ses propres éléments
      • Étendre le comportement de boutons existants
    • HTML imports : mécanisme de réutilisation

HTML templates

  • Nouvel élément : template
    • Intégré à la spec HTML5
    • Possède une propriété content
  • Permet de déclarer des fragments HTML
    • non visibles par les outils de traversée du DOM (ex. document.querySelector())
    • dont les contenus seront parsés mais pas rendus

(scripts pas déclenchés, images pas chargées…)

Utilisation

  • Déclaration dans la page
  • Ajout du contenu au DOM du document avec template.content.cloneNode() ou template.content.importNode()
    • différence : mise à jour au positionnement vs. à l'ajout
  • Positionnement dans l'arbre, p.ex. avec Node.appendChild()
  • Exemple

Shadow DOM

  • Objectif
    • Combiner plusieurs arbres DOM entre eux
  • Vocabulaire
    • document tree : arbre dont la racine est un document DOM
    • shadow tree : arbre dont la racine n'est pas un document DOM
    • shadow root : noeud racine d'un shadow tree
    • shadow host : noeud auquel est rattaché le shadow root d'un shadow tree
    • composed tree : arbre global résultant de la composition
  • Illustration

Mécanisme de distribution

  • Permet de “déplacer” des noeuds d'un document tree vers un shadow tree
    • les noeuds à distrubier doivent être fils d'un shadow root
    • ils seront distribués vers un insertion point appartenant au shadow tree rattaché au shadow root
  • illustration
  • Remarque : on peut “chaîner” les distributions, de sorte que les noeuds soient distribués vers un shadow tree puis vers un autre de profondeur supérieure

Particularités du shadow DOM

  • Propagation des événements
    • Certains types d'événements ne sont pas transmis aux shadow trees
    • En cas de distribution, algorithme de parcours (event path) particuliers
  • État des éléments
    • un élément HTML das un shadow tree peut être active, inter ou inert until rendered
    • en fonction du type d'élément
    • détails

Interfaces et éléments

  • shadowRoot : accès aux propriétés d'un shadow root
  • extension de l'interface element
    • shadowRoot : pointe vers le shadowRoot de l'élément
    • element.createShadowRoot() : en crée un sur l'élément courant
  • content : permet d'accéder à la liste des noeuds distribués sur un point d'insertion

Exemple d'utilisation

http://w3c.github.io/webcomponents/spec/shadow/#shadow-dom-example

Custom elements

  • Objectifs
    • Créer ses propres éléments
    • Étendre le comportement d'éléments existants

Fonctionnement

  • Déclarer un élément ou une extension
    • custom element type : nom de l'élément
      • doit contenir un trait d'union
      • ne doit pas contenir de majuscules
    • custom element prototype : contenu web, styles et comportement JS
      • peut contenir des templates et des shadow root
    • lifecycle callbacks : méthodes lancées à la création, à l' “attachement”…
  • “Attachement au document” : document.registerElement()

Exemple

HTML imports

  • Spécification permettant d'importer des custom elements à des URL quelconques
    • Remarque : les éléments seront importés à l'aide d'une requête AJAX (éventuellement CORS)
  • Exemple :

<link rel=“import” href=“mon-composant.html”>

Outils

  • Spécification non implémentée dans tous les navigateurs
  • Nécessite des Bibliothèques ad hoc

Références