Qu'est-ce que le Shadow DOM ?

Cet article explique ce qu'est le Shadow DOM.

YouTube Video

Comprendre le Shadow DOM

Le Shadow DOM est une fonctionnalité puissante du standard des Web Components qui permet l'encapsulation des styles et de la structure DOM au sein des composants. Cette fonctionnalité empêche les interférences de styles et de scripts entre les composants et le document principal.

Qu'est-ce que le Shadow DOM ?

Le Shadow DOM offre un moyen de créer un arbre DOM limité associé à un élément DOM classique. Cet arbre shadow est isolé du document global : les styles et scripts externes ne l'influencent pas, et ses styles et scripts internes ne s'échappent pas.

Par exemple, si vous créez un composant bouton personnalisé en utilisant le Shadow DOM, ses styles n'interféreront pas avec les autres éléments de la page. De même, les éléments portant le même nom de classe n'entreront pas en conflit.

Avantages du Shadow DOM

1. Encapsulation : le Shadow DOM sépare les styles et les fonctionnalités, empêchant les conflits avec les styles et scripts globaux.

2. Réutilisabilité : les composants construits avec le Shadow DOM peuvent être réutilisés dans différents projets sans se soucier des conflits de styles.

3. Maintenabilité : l'encapsulation permet aux composants d'être autonomes en termes de logique et de styles, ce qui facilite le débogage et la maintenance.

Créer un Shadow DOM

Pour utiliser le Shadow DOM, vous devez attacher une racine shadow à un élément HTML. Voici un exemple simple :.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Explication

1. Élément hôte : un élément DOM classique auquel est attachée la racine shadow (dans ce cas #shadow-host).

2. Racine shadow : la racine de l'arbre shadow créée avec attachShadow.

3. Mode : En mode open, le JavaScript externe peut accéder à la racine shadow via element.shadowRoot. En revanche, le mode closed n'autorise pas l'accès.

Styliser avec le Shadow DOM

Shadow DOM a son propre périmètre de styles. Les styles définis dans l'arbre shadow s'appliquent uniquement aux éléments de cet arbre. Voici un exemple :.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Même s'il y a des styles conflictuels dans le document principal, les paragraphes à l'intérieur de l'arbre shadow ne sont pas affectés :

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Les paragraphes à l'intérieur du Shadow DOM restent verts, tandis que les paragraphes externes sont rouges.

Les événements dans le Shadow DOM

Les événements dans le Shadow DOM sont similaires aux événements normaux du DOM, mais peuvent se comporter différemment en termes de propagation à cause de l'encapsulation. Les événements qui se produisent dans l'arbre shadow peuvent remonter jusqu'à l'élément hôte, mais ne remontent pas directement dans l'ensemble du document.

Voici un exemple :

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Lorsque le bouton est cliqué, les deux écouteurs sont déclenchés, ce qui démontre le comportement de la propagation des événements.

Slots : Distribution du contenu du Light DOM

Les slots permettent de projeter le contenu du Light DOM dans le Shadow DOM. Voici un exemple :.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

Dans le document principal, vous pouvez faire comme suit :

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Les éléments slot dans le Shadow DOM affichent le contenu du Light DOM avec l'attribut slot correspondant.

Conclusion

Shadow DOM est un outil essentiel pour créer des composants web robustes, réutilisables et maintenables. En encapsulant les styles et les fonctionnalités, il réduit les risques de conflits et simplifie la gestion du code.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video