<slot>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

El elemento HTML <slot> —parte de la suite tecnologica Web Components — es un placeholder en un componente que tu puedes llenar con tu propio marcado, que te permite crear árboles DOM por separado y presentarlos juntos.

Categorias de contenido	Contenido de flujo, contenido de fraseo
Contenido permitido	Transparente
Eventos	[`slotchange`](/es/docs/Web/Reference/Events/slotchange)
Omisión de etiqueta	Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Parentes permitidos	Cualquier elemento que acepte contenido de fraseo
Rol ARIA implícito	No corresponding role
Roles ARIA Permitidos	No se permite `role`
Interfaz DOM	`HTMLSlotElement`

Atributos

Este elemento incluye los atributos globales.

name

El nombre del slot.

Un slot nombrado es un elemento <slot> con el atributo name.

Ejemplos

html

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", Helvetica, Arial;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
    }
    h4 span {
      background: #217ac0;
      padding: 2px 6px 2px 6px;
    }
    h4 span {
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    h4 span {
      color: white;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <span>
        <code class="name"
          >&lt;<slot name="element-name">NEED NAME</slot>&gt;</code
        >
        <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
      </span>
    </summary>
    <div class="attributes">
      <h4><span>Attributes</span></h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

Nota: Puedes ver este ejemplo en accion en element-details (velo running live). Además, puedes encontrar una explicación en Using templates and slots.

Especificaciones

Specification
HTML Standard # the-slot-element
DOM Standard # shadow-tree-slots

Compatibilidad con navegadores

BCD tables only load in the browser