<slot>
Percer un trou dans un composant pour que l'extérieur le remplisse
<slot> — Le point d'insertion
La balise <slot> définit un emplacement dans le Shadow DOM d'un Web Component. Le contenu passé par l'utilisateur du composant vient remplir ce trou. C'est le mécanisme de composition des Web Components.
Quand l'utiliser
Tu construis un Web Component et tu veux que l'utilisateur puisse y injecter son propre contenu. Un <slot> nommé permet de cibler un emplacement précis (titre, corps, pied). Un <slot> sans nom reçoit tout le contenu non ciblé.
Ce que tu gagnes
Accessibilité : le contenu injecté dans un <slot> reste dans le DOM principal. Les lecteurs d'écran y accèdent normalement. Le Shadow DOM ne crée pas de barrière d'accessibilité pour le contenu slotté.
Exemple de code
<!-- Component definition -->
<template id="card-template">
<div class="card">
<slot name="title">Default title</slot>
<slot>Default content</slot>
</div>
</template>
<!-- Component usage -->
<my-card>
<h2 slot="title">Product name</h2>
<p>Description goes here.</p>
</my-card>