Light DOM vs Shadow DOM

Definition

Le Light DOM est le contenu enfant visible dans le markup HTML principal. Le Shadow DOM est l'arbre encapsulé interne du composant. Les slots projettent le Light DOM dans le Shadow DOM.

Analogie

Le Light DOM c'est le courrier qu'on met dans la boîte aux lettres (visible), le Shadow DOM c'est le mécanisme interne de tri.

Exemple de code

<!-- Light DOM (écrit par l'utilisateur) -->
<my-tabs>
  <div slot="tab">Onglet 1</div>
  <div slot="panel">Contenu 1</div>
</my-tabs>
<!-- Shadow DOM (interne au composant) -->
<!-- <div class="tabs"><slot name="tab"></slot></div> -->

Cas d'usage

Comprendre la composition des Web Components pour correctement styliser et accéder aux éléments.

Termes lies