El elemento HTML <slot> permite a los usuarios crear shadow DOM (Document Object Model). El árbol de sombras es una colección de elementos en un orden particular. Si los usuarios necesitan crear componentes web con la misma estructura con frecuencia, pueden crear un árbol de sombra utilizando el elemento <slot>. En palabras simples, el elemento HTML <slot> es un componente web que es un marcador de posición, colocado dentro del componente web que facilita completar el maquillaje con una elección propia que ayudará a crear árboles DOM separados y representarlos juntos. El usuario puede usar crear el árbol de sombra usando la etiqueta de plantilla . Aquí, la estructura del árbol de sombra permanece fija, pero los usuarios pueden agregar cualquier elemento HTML en una ubicación de ranura particular.
Los usuarios pueden acceder a la ranura particular en la plantilla utilizando su atributo de nombre . La siguiente sintaxis describe el elemento <slot>:
Sintaxis:
<slot name='exampleSlot'></slot>
Atributos: El elemento <slot> incluye los siguientes atributos:
- name: Define el nombre de un slot particular en el shadow tree. Debería ser único.
- Clase : para acceder a la ranura particular en la hoja de estilo.
Podemos acceder al elemento de la ranura anterior desde el árbol de la sombra como se muestra a continuación:
<h1 slot='exampleSlot'>GeeksforGeeks</h1>
Podemos ajustar cualquier elemento HTML a la ubicación de la ranura usando el atributo de nombre .
Este ejemplo ilustra cómo el navegador analizó el elemento <slot>:
<div class="website">
<div class="webpage">
<h1 slot="webpageName">GeeksforGeeks</h1>
</div>
<div>
<h3 slot="webpageDesc">Computer science portal</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
slot="webpageImage">
</div>
</div>
En el navegador, el siguiente código HTML se comporta como este código ilustrado. Al agregar un atributo de ranura a un elemento, estamos proporcionando una ranura a ese elemento en el árbol de sombra. Como puede ver, encaja en una ranura específica dentro del árbol de sombras.
Ejemplo: Este ejemplo describe el uso básico del atributo slot.
HTML
<!DOCTYPE html> <html> <head> <title>Slot element</title> </head> <body> <div class="website"> <div class="webpage"> <!--Creating slot element--> <slot name="webpageName"></slot> </div> <div> <slot name="webpageDesc"></slot> <slot name="webpageImage"></slot> </div> </div> <user-data> <!--Accessing the slot element by name and adding markup elements--> <h1 slot="webpageName">GeeksforGeeks</h1> <h3 slot="webpageDesc">Computer science portal</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" slot="webpageImage"> </user-data> </body> </html>
Salida: Para la salida, los elementos se ajustan en el árbol de sombra.
Navegadores compatibles: el elemento <slot> es compatible con los siguientes navegadores.
- Chrome 53 y superior
- Firefox 63 y superior
- Microsoft Edge 79 y superior
- Safari 10 y superior
- Ópera 40 y superior
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA