Slot

Definition

Point d'insertion dans le Shadow DOM où le contenu externe (Light DOM) est projeté. Les slots nommés permettent de distribuer plusieurs blocs de contenu à des emplacements précis.

Analogie

Comme les espaces réservés dans un cadre photo : chaque emplacement accueille une image différente.

Exemple de code

<!-- Shadow DOM du composant -->
<slot name="header">Titre par défaut</slot>
<slot>Contenu par défaut</slot>
<!-- Utilisation -->
<my-card>
  <h2 slot="header">Mon Titre</h2>
  <p>Mon contenu projeté</p>
</my-card>

Cas d'usage

Permettre la personnalisation du contenu d'un Web Component tout en gardant le style encapsulé.

Termes lies