Suite logique de l’article précédent concernant la v1 de Custom Elements, on va s’attaquer aujourd’hui à ce qui à changé entre la v0 et la v1 de la spec Shadow DOM. Dans tout les cas, sachez que la spec n’est toujours pas au stade de “final” et donc que ça peut encore changer…
Retour en arrière
Pour ceux qui n’ont pas connu la spec v0, sachez que le Shadow DOM est une nouvelle spécification mise en place par le Working group du W3C afin de pouvoir isoler une partie du DOM du reste de l’application. Cette spec fait tout son sens dans le monde des WebComponents car nous voulons créer des composants qui encapsulent divers éléments, mais également afin que ces éléments ne soit pas influencés par l’application qui les utilise (par exemple au niveau du style, on ne veut pas que le style de notre composant soit modifié involontairement par la page qui l’utilise).
Qu’est ce qui a changé
La création
Pour créé le Shadow Dom d’un élément en v0, il fallait faire :
var shadowRoot= this.createShadowRoot();
shadowRoot.innerHTML = '<h1>Hello World</h1>';A présent, la spec v1 rajoute la possibilité de cloisonner l’accès shadow DOM avec une propriété mode qui vaudra open ou closed selon que l’on veut autoriser l’accès via JavaScript au contenu ou pas.
On créera donc le Shadow DOM de la manière suivante :
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello World</h1>';Un exemple de {mode: 'closed'} est la balise vidéo qui contient un Shadow DOM dont l’accès via JavaScript est impossible.
Vérifier la compatibilité navigateur
Afin de savoir si votre browser supporte l’implémentation v1 de la spécification Shadow DOM, vous pouvez vérifier que le protoype de HTMLElement contient bien la méthode de création :
const supportsShadowDomV1 = !!HTMLElement.prototype.attachShadow;Si vous voulez vous informer sur le support cross-browser, la référence reste le site caniuse.com qui liste également le support de la v1 : https://caniuse.com/#feat=shadowdomv1
A ce jour, voici le support des principaux navigateurs desktop :
Polyfill
Dans tout les cas, vu le support navigateur à l’heure de l’écriture de cet article, il vous sera nécessaire d’implémenter un polyfill pour ajouter vous même ce que le navigateur ne connait pas encore.
Le polyfill webcomponents/shadydom vous permettra de gérer le JS. Pour ce qui est du CSS, on ne peut pas vraiment compenser totalement le manque du browser, mais ce qui est possible de faire à été fait par webcomponents/shadycss.
Autres articles sur le sujet
Si vous voulez aller plus loin dans les détails, ces quelques articles vous apporteront tout ce que vous avez besoin de savoir :
- L’article Shadow DOM v1 [EN] par Eric Bidelman (Google)
- Using Shadow DOM [multilingues] sur MDN
- Spec Shadow DOM W3C
Bon code !
