Web Components - Partie 1 : les custom elements

Authors : Alterway

Web Components, composer le web de demain

Avec le développement grandissant d'applications se basant sur la plateforme Web, une limitation est apparue : un nombre d'éléments d'interface mis à disposition par le langage HTML insuffisant. Car si l'HTML5 introduit de nouveaux éléments de formulaire, dont un color picker et un date picker, la plupart des gadgets d'interface (navigations, caroussels, curseurs) sont aujourd'hui construits avec un marquage non-sémantique, essentiellement grâce aux divs.

Si ce moyen de contournement a été probant jusqu'ici, utilisant le css pour styliser les gadgets, et le javascript pour les dynamiser et les rendre interactifs, il pose un soucis de performances : de son côté le navigateur fait son possible pour rafraichir le rendu HTML 60 fois par secondes et du leur, ces gadgets viennent s'executer à la suite de ce rendu, limitant d'autant les performances disponibles pour l'application proprement dite.

L'idée derrière la spécification des Web Components est donc de donner la possibilité aux développeurs d'étendre les éléments compris par le navigateur, les intégrant ainsi au flux de rendu par défaut. Particulièrement pertinents dans un contexte mobile où l'économie de performance réalisée impacte directement l'état de consommation de la batterie. Cet article est découpé en 4 parties présentant les principaux axes de la spécification des Web Workers.

1. Custom Elements
2. Templates & Decorators
3. Shadow Dom
4. HTML Imports

Partie 1 : les custom elements, des éléments customisés pour se rapprocher du standard

Un peu à la manière des data-attributs permettant de charger une balise html avec des attributs customisés, les custom elements donnent la possibilité au développeur de définir ses propres balises html.

Définir un élément customisé

-- nommage : La définition d'un élément customisé connait une unique contrainte, la présence d'un tiret (-) dans le nom de l'élément.

{{< highlight html >}} {{</ highlight>}}

-- extension d'un élément existant : Votre élément customisé peut se baser sur un élément HTML standard en utilisant l'attribut extends. [pastacode provider="manual" lang="markup"]

{{< highlight html >}} {{</ highlight>}}

Dans ce cas, l'appel dans le marquage HTML est rendu possible par l'attribut is prenant en paramètre le nom du custom element.

{{< highlight html >}} {{</ highlight>}}

A noter que sur ce modèle il est également possible d'étendre un custom element.

-- définir une API dans son custom element : Il suffit d'encapsuler une balise script dans le custom element pour lui ajouter des méthodes et des propriétés.

{{< highlight html >}} {{</ highlight>}}

-- callbacks du cycle de vie du custom element : Des méthodes de callbacks permettent d'identifier différents états de son élément customisé dans le document. Ces méthodes sont :

• readyCallback : l'élément est créé
• insertedCallback : l'élément est inséré dans le document
• removedCallback : l'élément est retiré du document

-- définition procédurale d'un custom element : Comme alternative à la définition d'un custom element par jeu de balise, le développeur inscrire en javascript son élément dans le document grâce à la méthode register. Dans ce cas, il est possible de déclarer des méthodes et propriétés en manipulant directement le prototype. La méthode register retourne une fonction qui peut être invoquée pour créer une nouvelle instance de l'élément.

{{< highlight javascript >}} var p = Object.create(HTMLButtonElement.prototype, {}); p.uneMethode = function () {/**/}; var monElementCustom = document.register('tag', 'custom-element-name', {prototype: p}); var b = new monElementCustom(); document.body.appendChild(b); b.addEventListener('click', function (event) { event.target.uneMethode(); });

var b = document.createElement('tag', 'fancy-button');
alert(b.outerHTML); // affiche '<tag is="custom-element-name"></tag>'

{{</ highlight>}}

-- pseudo-class unresolved : Afin de limiter les effets de saut d'affichage lorsque les définitions des custom elements sont chargées, une nouvelle pseudo-classe fait son apparition : unresolved. Elle permet de styliser tous les custom elements n'ayant pas encore une définition disponible. Support Pour l'instant limités aux versions 'nocturnes' des navigateurs Firefox et Chrome, les custom elements peuvent être exploités grâce à des librairies externes, notamment Polymer.js dont la syntaxe, même si très proche de la spécification, connaît quelques prises de liberté.

Derniers mots

Les custom elements permettent donc de proposer des balises customisées à la compréhension du navigateur. Maintenant, comment les faire évoluer au rang de gadgets modulaires ? Embarquant à la fois des fonctionnalités s’exécutant dans un scope limité à ce seul élément et une maquette réutilisable par d'autres ? La réponse dans les prochaines parties de cette série.

Annexe

• Spécification W3C des Web Components
• Polymer.js
• Rapprochement entre les Web Components et Mozilla Brick