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 atributoname
.
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"><<slot name="element-name">NEED NAME</slot>></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
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.