Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

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
Omisión de etiqueta None, both the starting and ending tag are mandatory.
Parentes permitidos Cualquier elemento que acepte contenido de fraseo
Roles ARIA Permitidos Ningunos
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: Tu puedes ver este ejemplo en accion en  element-details (velo running live). En adición, tu 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico53 No

591

Si — 592

No4010
name53 No No No4010
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico5353 No

591

Si — 592

4010.16.0
name5353 No No4010.16.0

1. From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

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

Etiquetas y colaboradores del documento

Colaboradores en esta página: rhssr
Última actualización por: rhssr,