slot

Description

L’attribut slot est utilisé sur les éléments enfants d’un Custom Element pour les assigner à un <slot name="..."> spécifique dans le Shadow DOM du composant. Sans cet attribut, le contenu est projeté dans le slot par défaut (sans nom).

Syntaxe

<mon-composant>
  <h2 slot="titre">Mon titre</h2>
  <p>Contenu dans le slot par défaut</p>
  <button slot="action">Valider</button>
</mon-composant>

Exemples

Carte produit avec slots nommés :

<!-- Définition du Shadow DOM (dans le JS du composant) -->
<template id="carte-produit">
  <style>
    :host { display: block; border: 1px solid #ccc; border-radius: 8px; }
    .titre { font-size: 1.25rem; font-weight: bold; padding: 1rem; }
    .corps { padding: 1rem; }
    .pied { padding: 0.5rem; border-top: 1px solid #eee; text-align: right; }
  </style>
  <div class="titre"><slot name="titre">Sans titre</slot></div>
  <div class="corps"><slot></slot></div>
  <div class="pied"><slot name="action"></slot></div>
</template>

<!-- Utilisation -->
<carte-produit>
  <span slot="titre">Casque audio Pro X</span>
  <p>Description du produit et ses caractéristiques.</p>
  <button slot="action" type="button">Ajouter au panier</button>
</carte-produit>

Notes

Slot par défaut : les éléments enfants sans attribut slot sont projetés dans le <slot> sans nom du Shadow DOM. S’il n’y a pas de slot par défaut, ces éléments sont ignorés.

Pas de rendu HTML direct : slot n’a d’effet que dans le contexte d’un Custom Element avec Shadow DOM. En dehors, il est ignoré.

Différent de l’élément <slot> : l’attribut slot (sur les éléments projetés) et l’élément <slot> (dans le Shadow DOM) travaillent ensemble mais ont des rôles distincts.