L’API Shadow DOM du HTML5

TL;DR;

Le Shadow DOM est un DOM encapsulé dans un élément et qui est isolé du reste de la page. On peut néanmoins y accéder via un objet javascript ou des sélecteurs CSS spécifiques.

Depuis cet article, la spec à changé et ne colle plus à la description ci-dessous. Référez-vous plutôt à la spec V1 décrite ici :  https://developers.google.com/web/fundamentals/web-components/ 

Continuer la lecture de « L’API Shadow DOM du HTML5 »

Custom Element API

TL;DR;

Dans le dernier article, je vous présentais les composants web. Une des API permettant de créer des composants est l’API html5 Custom Element. Elle permet de déclarer un nouveau composant dans le DOM et que celui soit reconnu par le browser pour l’affichage et avec ses comportements spécifiques.

Depuis cet article, la spec à changé et ne colle plus à la description ci-dessous. Référez-vous plutôt à la spec V1 décrite ici :  https://developers.google.com/web/fundamentals/web-components/ 

Continuer la lecture de « Custom Element API »

Introductions aux Composants Web (WebComponent)

TL;DR;

Avec les Composants Web tu peux désormais créer des éléments HTML réutilisables. Pour fonctionner, ils nécessitent l’utilisation de 4 nouvelles API HTML5 qui sont : Custom Element, Shadow DOM, HTML Template et HTML import. Comme elles ne sont pas encore supportées par tous les browsers, t’auras besoin du polyfill webcomponent.js pour travailler correctement. Continuer la lecture de « Introductions aux Composants Web (WebComponent) »