<slot>

Description

L’élément <slot> est utilisé dans le Shadow DOM des Web Components pour définir des emplacements où du contenu externe peut être injecté. Un slot sans name est le slot par défaut (capte tout le contenu non nommé). Les slots nommés permettent de placer du contenu dans des positions spécifiques du composant.

Syntaxe

<!-- Dans le shadow DOM du Web Component -->
<slot>Contenu par défaut si rien n'est fourni</slot>

Exemples

Web Component avec slots nommés :

<!-- Définition du composant -->
<template id="ma-carte">
  <style>
    :host { display: block; border: 1px solid #ccc; border-radius: 8px; padding: 1rem; }
    ::slotted([slot="titre"]) { font-size: 1.25rem; font-weight: bold; }
  </style>
  <slot name="titre">Titre par défaut</slot>
  <slot><!-- Contenu principal --></slot>
  <slot name="pied"><!-- Pied optionnel --></slot>
</template>

<!-- Utilisation -->
<ma-carte>
  <h2 slot="titre">Mon produit</h2>
  <p>Description du produit.</p>
  <button slot="pied" type="button">Acheter</button>
</ma-carte>

Attributs spécifiques

Attribut	Type	Description
name	string	Nom du slot. Les éléments avec slot="nom" correspondant y seront projetés.

Notes

<slot> uniquement dans le Shadow DOM : <slot> n’a de sens que dans un template utilisé comme Shadow DOM d’un Custom Element. En dehors du Shadow DOM, il est affiché comme un élément inconnu.

Contenu par défaut : le contenu placé entre les balises <slot> est affiché si aucun contenu n’est fourni pour ce slot — pratique pour les valeurs par défaut optionnelles.

::slotted() : le pseudo-élément CSS ::slotted(sélecteur) permet de styliser les éléments projetés dans les slots depuis l’intérieur du Shadow DOM.