Creación de Componentes Web Reutilizables con Slot en HTML5
Contenido del curso
Rony Porraz Vargas
Edgar Lopez Arroyo
Obed Paz
Andres Felipe Pinchao Ramirez
Joseph Manuel Salen Pantoja
Victor Andres Castillo Zambrano
Andrés Esteban Rodríguez Jiménez
Billy Torres
Brayan Ramirez Alzate
Bryan Figueroa
Alejandro Zapata
Guillermo Castaño Vèlez
Omar Gabriel Aguilar Moscoso
Jimmy Buriticá Londoño
Miguel Angel Reyes Moreno
Daniel Andres Rojas Paredes
Alfredo Martínez García
Misael Valdez
Kenneth Angulo L
Kenneth Angulo L
Jefred Bedoya
Andres Moreno
Edgar Lopez Arroyo
Naldo Duran
Excelente aporte!! 👍
Buen resumen, gracias!
En esta clase vamos a aprender a manejar una etiqueta llamada custom slot que es una etiqueta de html 5 que nos va a ayudar a generar el placeholder donde va a ir el texto o cierto contenido que necesitemos.
Lo que hacemos con esto es poder cambiar algo dentro del componente, porque no es muy escalable tener que ir hasta el template y hacer unos cambios si no que simplemente desde el componente indicarlos y poderlos cambiar facilmente.
En nuestro template agregamos una etiqueta llamada slot que nos servirá como placeholder para indicarle al componente que agregaremos contenido ahí
De esta forma cuando agregamos contenido desde html este contenido no se renderizara dentro el componente si no fuera de el y cuando utilizamos el slot esta herramienta podra traer ese contenido que tenemos fuera hasta nuestro componente.
Puedo sentir como aumenta mi poder con cada clase :D .
tengo una pregunta, en el curso de manipulacion del DOM vimos que usar innerHTML puede causar problemas de seguridad, Si nuestra etiqueta slot es para que el developer tenga cierta interactividad en el template, es recomendable usar el innerHTML en ese caso?
Content Slot
Para aprender como hacer que nuestros componentes sean totalmente reutilizables debemos aprender a manejar los datos dinámicos desde afuera de los componentes, esto lo podemos lograr con las etiquetas especificas y traerlas. .
En este punto vamos a aprender a usar la etiqueta content-slot. .
De buenas a primeras debemos lograr que podamos escribir algo por fuera de las etiquetas y que sea parte del #shadow-root, ya que si ahora lo hacemos pues no va a pasar:
<body> <my-element> <!-- Esto no hara parte del #shadow-root ❌ (de momento) --> Hola que hace </my-element> </body>
Para lograr que se vea representado dentro de una etiqueta junto con la lógica del #shadow-root debemos usar la etiqueta <slot>.
Veamos un ejemplo:
class MyElement extends HTMLElement { constructor ( ) { ... } getTemplate() { const template = document.createElement('template'); template.innerHTML = ` <section> <h3> **<slot></slot>** </h3> </section> ${this.getStyles()} ` return template; } ... }
Lo que hace la etiqueta slot es que actúa como un placeholder en el cual nosotros podemos introducir contenido, este contenido lo puede dar el usuario si así se programara, de esta forma ya se inyectaría lo que introdujéramos en la etiqueta HTML . . Ósea que algo como esto ya tendría sentido:
<body> <my-element> <!-- Ahora si veríamos un resultado correcto con los estilos y el comportamiento de nuestro #shadow-root como lo deseamos ✔ --> Hola que hace </my-element> </body>
No se si aun estes vivo, pero tu explicación me sirvio de mucho. 🙂🙌Gracias.
Completamente offtopic pero hasta ahora me dí cuenta que tiene un modelo de la estación espacial internacional detrás y me encanta, mi sueldo de programador algún día irá para uno de esos
tambien tiene funkos y dependiendo de la clase los cambia xd
pues casualmente tengo exactamente la misma. Es de Lego :)
Se me parece un poco a svelte
yeah
Muy practico ingresar un dato fuera del componente, ahora quiero saber como ingresar muchos datos. Necesito hacer un menú digital y esto me viene muy bien.
Apuntes + código con comentarios:
Manejo de datos
Content Slot
Es una etiqueta de HTML 5 que nos va a ayudar a poder generar el placeholder en donde irá el texto o cierto contenido que necesitos para que, afuera de le etiqueta, nosotros podamos pasarle contenido que el componente pueda renderizar.
Básicamente modificamos la etiqueta en HTML y JS hará el trabajo sucio por nosotros.
<my-element> Soy texto dentro del slot </my-element>
getTemplate(){ //*Esto será puro HTML const template = document.createElement('template'); template.innerHTML = ` <section> <h3> <slot></slot> <!---En el slot tendremos el texto que tenemos en la etiqueta de my element---> </h3> </section> ${this.getStyles()} <!---Aplicamos los estilos---> `; return template; }
hola, hice un pequeño cambio en el codigo y no me funciono , esto me susito la duda ¿ como funcionan los metodos getter y setter en js? el cambio que hice fue el siguiente```js
//en vez de definir los metodo getstyles lo hice get styles igual con get template
get template (){... ${this.styles()}
return template}
get styles(){return ...}
render(){
this.appendChild(this.template()).content.cloneNode(true)
}
¿cómo puedo agregar multiSlots por ejemplo el h2 màs otro P para agregar diferente contenido, cómo una card?
¿Que estamos haciendo? => estamos haciendo contenido dinamico. that's all
¿Puedo usar esto para inyectar múltiples elementos?
Sí, es totalmente posible y de hecho es una práctica muy común para componentes complejos. A esto se le conoce como Multi-slots o Named Slots (slots con nombre). Imagina que estás construyendo una tarjeta de perfil de usuario. No solo necesitas inyectar un nombre, sino también una foto, una descripción y botones de redes sociales. En lugar de tener un solo espacio genérico, puedes crear múltiples etiquetas <slot> y asignarles un atributo name específico (por ejemplo, <slot name="titulo"></slot>). Luego, desde el HTML externo, simplemente le indicas a cada pieza de contenido a qué slot pertenece usando el atributo slot="titulo". Esto te da un control milimétrico sobre la composición de tu interfaz, permitiéndote armar estructuras ricas y altamente personalizables sin perder el encapsulamiento.
¿Por qué es mejor usar etiquetas slot?
Porque te permite construir verdaderas piezas de Lego independientes. Si no usaras <slot>, tendrías que escribir el texto de forma estática dentro del componente o crear complejas lógicas de JavaScript para actualizar el DOM interno cada vez que necesites un cambio. Al usar <slot>, delegas la responsabilidad del contenido al usuario del componente (el desarrollador que lo implementa en el HTML), mientras que el componente en sí mismo solo se preocupa por la estructura y el diseño. Imagina que fabricas televisores: tú construyes la pantalla y los bordes (el componente y sus estilos), pero es el usuario quien decide qué canal sintonizar (el contenido inyectado en el slot). Esto hace que tu código sea infinitamente más escalable, limpio y fácil de mantener en proyectos grandes.
Dame los puntos mas importantes de la clase Separalos por semantica humana, listas, titulos, subtitulos, negrillas, etc. Quiero que el resumen sea lo mas claro y conciso posible Omite informacion como saludo, nombre, etc Omite la pregunta final.
Concepto clave: Reutilización dinámica
El objetivo es transformar componentes en piezas de Lego independientes, donde el contenido no esté "hardcodeado" dentro del componente, sino que se inyecte desde afuera.
La etiqueta <slot>
slot, el contenido inyectado hereda automáticamente los estilos definidos dentro del Shadow DOM del componente, manteniendo la consistencia visual.Ventajas principales
<p> o <h1>) que aceptan cualquier contenido dinámico.En este video que les comparto, quise profundizar un poco mas de los HTMLTemplates y de los Slots
HTML:
<my-element>Soy un texto fuera del shadow</my-element>
en mi template:
<h2> <slot></slot> </h2>
,