---
title: Shadow Dom VS Virtual Dom - Développement Web
tags: Web-Dev
---

# Shadow DOM VS Virtual DOM

## ==Définition==

:::info
* Le **DOM** pour **Document Object Model** est une interface de programmation permettant à des langages comme l'**HTML** et le **XML** de structurer l'information selon une méthode de `balisage`.
La structure ainsi créée s'appelle l'`arbre DOM`.
:::

:::info
* Le **Shadow DOM** est une technologie du navigateur conçue principalement pour limiter la portée des variables et du **CSS** dans les **Web Components**.
Pour visualiser ce dernier il faut imaginer un **DOM** dans un **DOM** ; c'est-à-dire que son arbre **DOM** est isolé du **DOM** original et dispose de ses propres éléments et styles.
:::

:::info
* Le **DOM virtuel** quant-à lui est un concept implémenté par les bibliothèques en **JavaScript** comme **React.js** et **Vue.js** en plus des **API** des navigateurs.
* Il a été créé pour résoudre les problèmes de rafraîchissement du contenu d'une page ; étant donné le **DOM** comme il a été imaginé n'était pas prévu (ou au minimum pas optimisé) pour telle action car les utilisations du web de l'époque n'exigeaient pas ce besoin.
:::

## ==Fonctionnement==

> ***Shadow DOM***

:::danger
* Si l'on prend par exemple cet élément **HTML** qu'est le `span` alors on réalise qu'il est composé de plusieurs sous-éléments comme la `class` d'autres types d'éléments comme un `a` disposant lui-même d'une propriété `href`.

<span class="shadow-host">
  <a href="https://twitter.com/twitter">
     Follow @twitter
  </a>
</span>

* On expose uniquement au **DOM** global l'élément `span` et on souhaite maintenant le rattacher à ce nouveau type de **DOM**.

const shadowEl = document.querySelector(".shadow-host");
const shadow = shadowEl.attachShadow({mode: 'open'});

* Cela va créer un `shadow root` vide en tant qu'enfant de l'élément.
Il est comparable au tag `html` pour le **DOM** d'origine.
Quand on cible le `shadow root` dans l'inspecteur **devtools** alors le reste du **DOM** n'est plus visible.

const link = document.createElement("a");
link.href = shadowEl.querySelector("a").href;
link.innerHTML = `
    <span aria-label="Twitter icon"></span> 
    ${shadowEl.querySelector("a").textContent}
`;

* On veut maintenant générer le `shadow tree` qui est l'équivalent de l'`arbre DOM` pour le `Shadow DOM`.
On lui rajoute alors l'élément désiré par ce procédé.

shadow.appendChild(link);

* A ce moment-là on est libre d'ajouter du style à ces nouveaux éléments.
:::

> ***Virtual DOM***

:::danger
* Cette nouvelle méthode d'interaction avec le **DOM** permet donc de réaliser des modifications sur une copie du **DOM** d'origine pour ensuite observer l'ampleur des changements et les appliquer au **DOM** réel de la même manière qu'un outil de versioning comme `Git`.

* Il utilise une représentation du **DOM** sous forme d'objet **JavaScript** et le manipule ainsi.

* On met donc en place une isolation des modifications nécessaires pour optimiser le rafraîchissement en le ciblant aux uniques éléments dont il est question.

* On stocke alors dans un nouvel objet la liste des modifications et on compare cela à l'état actuel du **DOM** parent.

* On doit à ce moment-là dérouler une suite d'instructions pour remplacer un-à-un les éléments modifiés en arrière-plan.
:::