Elementos slot para distribuir contenido
Proyecte contenido del host en el shadow DOM con slots con nombre y predeterminados
Elementos slot para distribuir contenido es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Light DOM frente a Shadow DOM
Los hijos escritos dentro de un elemento personalizado en HTML forman el "light DOM" del elemento; no están en el árbol shadow. De forma predeterminada, el navegador no los renderiza; el árbol shadow debe solicitarlos explícitamente mediante <slot>.
El slot predeterminado
Un elemento <slot> dentro del árbol shadow marca el lugar donde deben aparecer los hijos del light DOM. Sin un nombre, es el slot predeterminado y acepta cualquier hijo directo del host.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>Slots con nombre
Puede hacer referencia a varios slots mediante su nombre. El árbol shadow declara <slot name="header">; el usuario lo solicita mediante <h1 slot="header">. Los hijos que tienen un atributo slot coincidente ocupan ese slot; los hijos que no coinciden pasan al slot predeterminado.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Contenido alternativo del slot
El contenido situado entre las etiquetas del slot se renderiza solo cuando no hay nada asignado a ese slot: <slot>No content provided</slot>. Úselo para mostrar texto de marcador de posición o instrucciones cuando los slots estén vacíos.
Herencia de estilos a través de los slots
Los hijos asignados a slots permanecen en el light DOM y heredan los estilos del documento principal, no del árbol shadow. Use el pseudoelemento ::slotted() desde dentro del shadow para aplicarles estilos: ::slotted(p) { color: red; }.
Limitaciones de ::slotted
::slotted() solo puede seleccionar hijos directos del host (los elementos que realmente se distribuyen en el slot). No puede seleccionar sus descendientes. Para aplicar estilos más profundos, exponga propiedades personalizadas de CSS o use ::part en los elementos internos del shadow.
Detección de cambios en slots
Cada slot emite un evento slotchange cuando cambian sus nodos asignados. Escúchelo para reaccionar a las actualizaciones dinámicas del contenido: slot.addEventListener("slotchange", handler). Es útil para componentes cuyo diseño depende de los hijos presentes.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes y assignedElements
slot.assignedNodes() devuelve todos los nodos asignados a un slot (incluidos los nodos de texto). slot.assignedElements() devuelve únicamente los hijos Element; normalmente es el método que querrá usar al recorrer mediante programación el contenido asignado a un slot.
Distribución de hijos
El navegador gestiona automáticamente toda la distribución según el atributo slot de cada hijo. No hay ningún paso de JavaScript: escriba <span slot="footer">...</span> entre los hijos del light DOM del host y el slot shadow correspondiente lo contendrá.
Slots y estilos del host
Los estilos propios del host (establecidos en <my-card> dentro del documento) se aplican en cascada a los hijos del light DOM, incluidos los que terminan asignados a un slot. El CSS shadow mediante ::slotted tiene mayor especificidad que los estilos heredados del host cuando ambos afectan a la misma propiedad.
Casos de uso habituales
Tarjetas con slots para encabezado, cuerpo y pie; diálogos con slots para título, contenido y acciones; elementos de lista con slots iniciales y finales; menús de navegación con slots para elementos. Los slots hacen que los elementos personalizados sean componibles, del mismo modo que <details>/<summary> o <table>/<tr>.
Comprobación de conocimientos
¿Cuál es la diferencia entre el slot predeterminado y un slot con nombre?
Resumen
Los slots proyectan los hijos del light DOM en lugares específicos del árbol shadow. El slot predeterminado acepta cualquier hijo sin nombre; los slots con nombre aceptan hijos con atributos slot coincidentes. El contenido alternativo rellena los slots vacíos, ::slotted aplica estilos a los hijos directos asignados a slots y los eventos slotchange permiten reaccionar a las actualizaciones dinámicas del contenido.
Preguntas frecuentes
¿La lección «Elementos slot para distribuir contenido» es gratis?
Sí — el texto completo de «Elementos slot para distribuir contenido» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Elementos slot para distribuir contenido»?
Proyecte contenido del host en el shadow DOM con slots con nombre y predeterminados Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Elementos slot para distribuir contenido»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- attachShadow y Shadow Root
- Elementos slot para distribuir contenido
- Estilos con ámbito dentro del Shadow DOM
- Part y exportparts para aplicar estilos externos