Elemento slot

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento slot representa un espacio dentro de un componente creado mediante la especificación de shadow DOM. Este elemento se vuelve poderoso en el desarrollo de complementos compuestos, favoreciendo la reutilización de código.

El elemento slot está pensado para ser utilizado por programas. Los autores de contenido pueden encontrar escasa utilidad en este elemento.

Un árbol shadow DOM o shadow tree es una jerarquía de elementos, equivalente a la jerarquía de cualquier documento HTML, que coexiste con el árbol del documento y otros árboles, pero es completamente independiente de ellos. Entre otras cosas, esta característica permite a los árboles tener sus propias clases e IDs que no interfieren con las clases e IDs de otros árboles.

Ejemplos

El siguiente ejemplo muestra la definición de un componente que otros desarrolladores pueden utilizar para crear elementos con la misma estructura. En este caso, el componente organiza información acerca de usuarios, incluyendo una foto de perfil, un sobrenombre y su nombre.

<div class="user">
  <div class="fotoperfil">
    <slot name="fotoperfil"></slot>
  </div>
  <slot name="sobrenombre"></slot>
  <slot name="nombre"></slot>
</div>

Desde aquí, un usuario de componentes puede definir al elemento personalizado como a continuación:

<user-data>
  <img src="juanjo.jpg" slot="fotoperfil">
  <span slot="sobrenombre">juanjo</span>
  <span slot="nombre">Juan Jo</span>
</user-data>

Finalmente, el navegador distribuye los datos del usuario dentro del shadow tree del componente durante la representación, obteniendo el código final:

<div class="user">
  <div class="fotoperfil">
    <slot name="fotoperfil">
      <img src="juanjo.jpg" slot="fotoperfil">
    </slot>
  </div>
  <slot name="sobrenombre">
    <span slot="sobrenombre">juanjo</span>
  </slot>
  <slot name="nombre">
    <span slot="nombre">Juan Jo</span>
  </slot>
</div>

Nota: los ejemplos precedentes ilustran brevemente la idea detrás de los componentes y los shadow trees. La parte programática de este mecanismo ha sido omitida ya que cae fuera del alcance de este sitio.

Atributos

Atributos específicos

name

Un nombre para el slot. Los elementos declarados para tomar lugar en el slot usarán este identificador como contenido del atributo slot.

Ejemplo

<div class="receta">
  <div class="ingredientes">
    <slot name="ingredientes"></slot>
  </div>
  <hr>
  <div class="proceso">
    <slot name="proceso"></slot>
  </div>
</div>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.