<slot>

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
Omisión de etiqueta None, both the starting and ending tag are mandatory.
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

<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.

Especificaciónes

Especificación Estado Comentario
HTML Living Standard
La definición de '<slot>' en esta especificación.		 Living Standard
DOM
La definición de 'Slots' en esta especificación.		 Living Standard

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
slotChrome Soporte completo 53Edge Soporte completo 79Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 40Safari Soporte completo 10WebView Android Soporte completo 53Chrome Android Soporte completo 53Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 41Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 6.0
nameChrome Soporte completo 53Edge Soporte completo 79Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 40Safari Soporte completo 10WebView Android Soporte completo 53Chrome Android Soporte completo 53Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 41Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.