Salut et bienvenue dans ce nouvel épisode du podcast de Code Garage, je m'appelle Nicolas
Bondin-Vernard et aujourd'hui on va parler du Shadowdom.
Pas de sponsor sur le podcast pour cette fois, mais je voulais en profiter pour mettre en
avant une initiative publique.
L'ANSI en 2021 a aidé à la création de 9 centres de réponses régionaux qu'on appelle
aussi des CSIRT pour lutter contre les cyberattacks dans les entreprises, les associations et les
collectivités.
Ces centres, ils vous permettent si vous êtes sujet à une cyberattaque de les contacter
et ensuite ils vont vous accompagner, il y a un centre d'appel et ils vont vous mettre
en relation avec des entreprises spécialisées dans la cyber défense, la récupération de
données et des infrastructures après une attaque.
En plus, certaines entreprises acceptent de faire des tarifs avantageux pour que l'attaque
ne mette pas en péril votre entreprise au complet.
Si vous êtes concerné, il faut vraiment faire appel à eux sans attendre.
En s'en preuve all de l'oie, l'initiative s'appelle cyber réponse avec « en seul air
entre cyber et réponse » mais de toute façon je vous mets le lien et le numéro d'urgence
dans les notes du podcast.
Revenons à notre Shadowdom.
Le Shadowdom c'est une fonctionnalité qui est disponible dans les navigateurs et qui
offre la possibilité d'encapsuler des éléments d'hommes pour les isoler du reste de la page.
C'est notamment cette fonctionnalité qui permet de créer des web components, mais
pas seulement, voyons ensemble comment ça fonctionne exactement.
Le DOM, Document Object Model, c'est comme tout le monde le sait, un arbre d'éléments
HTML qui compose une page web.
Par défaut, dans une page web, tout est accessible librement et peut interagir ensemble.
Par exemple, une balise de style, c'est un élément HTML qui peut altérer graphiquement
d'autres éléments peu importe où ils sont placés dans la page.
Même chose pour la balise de script qui pourra ajouter, modifier, supprimer des éléments
grâce à l'app.dome mis à disposition par le navigateur.
Eh bien le Shadowdom c'est un arbre d'hommes supplémentaires cachés et isolés du reste
de la page web.
Ça signifie que les styles ou les scripts liés à cet arbre spécifique ne peuvent
pas réellement interagir avec l'extérieur et réciproquement, les scripts extérieurs
ne peuvent pas rentrer à l'intérieur sauf qu'à spécifique.
Alors il faut faire attention parce qu'on parle souvent d'un Shadowdom, comme s'il
n'y en avait qu'un seul, mais en réalité il peut y en avoir une infinité.
Chaque Shadowdom prend racine sur un élément existant du DOM, c'est ce qu'on appelle le
Shadowhost, et ça peut être n'importe quel élément du DOM.
Ça peut être un bouton, un span, une divpe, peu importe.
Ensuite le Shadowdom possède un élément racine, pardon, qu'on appelle le Shadowroot,
et il peut contenir tous les éléments possibles et imaginables qui seront séparés du DOM
classique.
Alors pour créer un Shadowdom c'est très simple, il suffit de quelques lignes de JavaScript.
D'abord on va venir sélectionner avec un query selector, eh bien notre élément,
à partir duquel on veut justement créer notre Shadowdom.
On le stocke dans une variable qu'on va appeler host par exemple, et on va pouvoir simplement
appeler host.attach Shadow, donc pour attacher un Shadowdom, et ensuite à cette méthode
là on va pouvoir lui passer un paramètre qui est un mode qui soit open, soit closed,
et on va voir à quoi ça sert un peu plus tard.
Ça on le stocke dans une variable qu'on va appeler Shadow par exemple, et ensuite on
a déjà notre Shadowdom, on va pouvoir faire simplement Shadow.appenchild et mettre
ce qu'on veut dedans.
C'est très très simple d'utilisation, vous avez vu en quelques lignes ça se fait.
Alors la principale utilité du Shadowdom c'est de pouvoir créer des web components,
des composants réutilisables, paramétrables, et dont la logique et le style est indépendant
du reste de la page web.
Pour créer un composant web en web component c'est très simple, on va créer une classe
MyComponent par exemple qui va étendre la classe native HTML element.
On va également créer un template HTML pour ce composant, et dans le constructeur de cette
classe MyComponent, on va venir instantier le template qu'on a créé précédemment
dans le Shadowdom en utilisant justement la méthode dont je vous ai parlé avant attach
Shadow et on va venir faire des appenchild, des inner HTML ou peu importe.
Ensuite il nous suffira de faire un window.customElements.define, donner un nom à notre component et puis
venir ajouter en deuxième paramètre la classe qu'on vient de créer.
Et voilà on a utilisé notre Shadowdom pour créer un web component native.
Il faut savoir que le Shadowdom c'est un concept qui était déjà utilisé dans les
navigateurs avant même d'être mis à disposition des développeurs et développeuses.
Tous les éléments HTML qui possèdent un rendu un peu complexe avec des éléments
supplémentaires et non accessibles depuis le CSS ou le JavaScript,
utilisent en réalité le Shadowdom. C'est par exemple le cas pour l'élément vidéo
HTML5 qui utilise le Shadowdom pour ces boutons, sa barre de lecture pour contrôler la vidéo.
Ça n'y a pas accès depuis l'extérieur donc c'est simplement dans un DOM alternatif qui est
lié à l'élément vidéo. J'espère que cet épisode vous aura plu, vous aurez appris quelque
chose et que vous en saurez un petit peu plus sur le Shadowdom et son utilisation.
Moi je vous donne rendez-vous la semaine prochaine pour un prochain épisode du podcast ou directement
sur code-garage.fr. Comme vous le savez si vous avez écouté les épisodes précédents,
on a sorti la v2 de la plateforme très récemment. Il y a de nombreuses fonctionnalités qui
arrivent un petit peu toutes les semaines, des nouveaux cours. Je vous conseille d'aller y
faire un tour si ça fait quelques temps que vous n'y êtes pas allé. Il faut vraiment foncer
puisque vous allez voir, vous ne reconnaîtrez plus rien dans le bon sens du terme. On a
amélioré absolument chaque partie de la plateforme. Donc si vous voulez retrouver nos articles de
blogs, tous nos podcasts et évidemment nos formations complètes, rendez-vous sur code-garage.fr
et moi je vous dis rendez-vous la semaine prochaine. Salut !