Elemento <slot>
El mecanismo de los web components para dejar que contenido externo se "proyecte" en lugares determinados dentro del Shadow DOM de un componente. Un <slot> es un marcador de posición donde se colocan los elementos hijos propios del usuario — la base de la composición de componentes.
El problema: un web component con Shadow DOM tiene su interior encapsulado, pero a menudo se quiere poder insertar contenido propio dentro de él (como children en React, o cómo un <button> muestra su texto). Los slots lo resuelven: el componente define lugares <slot> en su shadow DOM, y el contenido que el usuario escribe entre las etiquetas del componente se "proyecta" ahí. Los named slots (<slot name="header"> junto con slot="header" en el hijo) permiten que distintos contenidos acaben en distintos lugares (encabezado, cuerpo, pie). Un detalle importante: el contenido proyectado sigue viviendo en el DOM normal (light DOM) y se estiliza desde ahí, no desde el CSS del shadow del componente. La ganancia: componentes flexibles y componibles (una tarjeta donde el usuario rellena el contenido). El núcleo de la composición en web components.