<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 (en-US)
Eventos [`slotchange`](/es/docs/Web/Reference/Events/slotchange)
Omisión de etiqueta None, both the starting and ending tag are mandatory.
Parentes permitidos Cualquier elemento que acepte contenido de fraseo (en-US)
Rol ARIA implícito No corresponding role
Roles ARIA Permitidos No se permite role
Interfaz DOM HTMLSlotElement (en-US)

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