Descripción
El elemento slot es parte de la especificación de los Web Components y permite definir puntos de inserción de contenido en una plantilla de componente. Esto significa que puede marcar lugares en una plantilla de componente HTML donde se debería insertar contenido específico, lo que permite la reutilización y la personalización de los componentes.
Sintaxis
<template>
<p><slot name="nombre"></slot>
</template>
Atributos
Atributos Globales
- accesskey
- autocapitalize
- autofocus
- contenteditable
- dir
- draggable
- enterkeyhint
- hidden
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- nonce
- spellcheck
- style
- tabindex
- title
- translate
Ejemplo
<template>
<p>Hola, <slot name="nombre"></slot>!</p>
</template>
<my-component>
<span slot="nombre">Mundo</span>
</my-component>
En este ejemplo, el texto “Mundo” se insertará en el lugar del elemento slot en la plantilla my-component, resultando en “Hola, Mundo!”.
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.