Élément <slot>
Le mécanisme des web components qui permet de « projeter » du contenu extérieur à des emplacements précis dans le Shadow DOM d'un composant. Un <slot> est un espace réservé où viennent se placer les éléments enfants de l'utilisateur — la base de la composition de composants.
Problème : un web component doté d'un Shadow DOM a son propre intérieur encapsulé, mais on veut souvent pouvoir y glisser son propre contenu (comme children dans React, ou comme un <button> affiche son texte). Les slots règlent la question : le composant définit des emplacements <slot> dans son shadow DOM, et le contenu que l'utilisateur écrit entre les balises du composant y est « projeté ». Les slots nommés (<slot name="header"> + slot="header" sur l'enfant) envoient des contenus différents à des endroits différents (titre, corps, pied de page). Détail important : le contenu projeté reste dans le DOM ordinaire (light DOM) et reçoit son style de là, pas du CSS shadow du composant. Avantage : des composants souples et composables (une carte que l'utilisateur remplit de contenu). Le cœur de la composition des web components. À rapprocher des web components et du shadow DOM déclaratif.