Contenido del curso
Creación de Componentes Web Reutilizables con Slot en HTML5
¿Cómo crear componentes web reutilizables?
El desarrollo de componentes web que son totalmente reutilizables es un pilar fundamental en la creación de aplicaciones modernas. Estos componentes actúan como piezas de Lego, permitiendo que los desarrolladores los empleen en diferentes contextos sin preocuparse por su implementación interna. Un elemento clave para lograr esto es el manejo de datos dinámicos desde fuera del componente.
¿Qué son los datos dinámicos?
Los datos dinámicos se refieren a la información que un componente recibe del exterior para mostrar o procesar. Por ejemplo, las etiquetas de texto en HTML5 como <p> o <h1> requieren contenido para ser útiles, pero este contenido es proporcionado externamente, permitiendo que estas etiquetas sean cien por ciento reutilizables. Este mismo principio puede aplicarse a nuestros propios componentes web.
¿Cómo utilizar la etiqueta slot en componentes web?
Para integrar contenido dinámico en componentes web, una herramienta esencial es la etiqueta slot. Esta etiqueta actúa como un marcador de posición (placeholder), en donde se inyectará el contenido pasado desde fuera del componente.
<h2><slot></slot></h2>
Con esta simple línea, cuando pasamos texto o contenido al componente, este detecta el slot y lo coloca dentro, respetando los estilos y estructura definidos en el componente. Esto permite cambios en el contenido sin necesidad de modificar el código interno del componente, facilitando así la reutilización y la escalabilidad.
¿Cómo se integra el contenido externo al Shadow DOM?
Al aplicar la etiqueta slot, el contenido que parece estar "fuera" del componente visible se inyecta en el Shadow DOM. Esto significa que:
Shadow DOM, permitiendo mantener la estructura y los estilos internos.Shadow DOM, e ignora los estilos globales a menos que se compartan explícitamente.Por ejemplo, si un <h2> dentro de un componente tiene un color de texto definido, el contenido inyectado a través del slot adoptará estos estilos.
¿Cómo gestionar múltiples slots en un componente?
El uso de slots no se limita a un solo lugar. Podemos definir múltiples slots en un componente para diferentes partes del contenido – este concepto se conoce como 'multi slots'. Esto permite manejar componentes más complejos que requieran múltiples piezas de contenido dinámico en distintos lugares. La gestión de estos slots ofrece flexibilidad y personalización superior en la creación de interfaces más sofisticadas. Exploraremos más acerca de los 'multi slots' en el siguiente aprendizaje.
Como ves, integrar contenido dinámico en tus componentes web usando slot es un proceso sencillo pero poderoso, que habilita la creación de elementos versátiles y modulares. Continúa explorando y experimentando para fortalecer tus habilidades de desarrollo y crear aplicaciones impresionantes y reutilizables. ¡Ánimo y sigue progresando!
Rony Porraz Vargas
Estudiante
Edgar Lopez Arroyo
Estudiante
Obed Paz
Estudiante
Andres Felipe Pinchao Ramirez
Estudiante
Joseph Manuel Salen Pantoja
Estudiante
Victor Andres Castillo Zambrano
Estudiante
Andrés Esteban Rodríguez Jiménez
Estudiante
Billy Torres
Estudiante
Brayan Ramirez Alzate
Estudiante
Bryan Figueroa
Estudiante
Alejandro Zapata
Estudiante
Guillermo Castaño Vèlez
Estudiante
Omar Gabriel Aguilar Moscoso
Estudiante
Jimmy Buriticá Londoño
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Daniel Andres Rojas Paredes
Estudiante
Alfredo Martínez García
Estudiante
Misael Valdez
Estudiante
jefred bedoya
Estudiante
Andres Moreno
EstudianteEdgar Lopez Arroyo
Estudiante
Naldo Duran
Estudiante
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
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>
,