Contenido del curso
Uso de Multicontent Slot en Componentes Web
¿Cómo funciona un multicontent slot en el desarrollo de componentes web?
Para aquellos que desean llevar su destreza en desarrollo web a otro nivel, comprender el concepto de multicontent slot es esencial. Estos permiten que se rendericen múltiples partes de contenido dinámico dentro de un componente específico, ofreciendo un grado elevado de flexibilidad y personalización. Imagina que estás creando un componente reutilizable que requiere diferentes tipos de texto como un encabezado, un párrafo, y más. Mediante multicontent slots, puedes asegurarte de que cada parte se renderice en su lugar adecuado.
¿Cómo implementar multicontent slots?
Implementar multicontent slots es más sencillo de lo que podrías imaginar:
name para diferenciarlos. Esto te permitirá especificar cuál contenido va en cada slot específico.<template> <h2> <slot name="title"></slot> </h2> <p> <slot name="body"></slot> </p> </template>
slot para indicar cuál es su destino.<span slot="title">Soy el título</span> <span slot="body">Soy el texto del párrafo</span>
¿Por qué usar multicontent slots?
La utilización de multicontent slots ofrece varias ventajas, especialmente en el desarrollo de componentes reutilizables:
¿Cómo impactan en el flujo de trabajo del desarrollador?
El uso de multicontent slots transforma significativamente el flujo de trabajo del desarrollador al introducir un nivel de abstracción que favorece la separación de preocupaciones. Esto facilita la colaboración en equipos grandes, permite un manejo más eficiente de la lógica, y simplifica la actualización y mantenimiento de aplicaciones a largo plazo. Siguiendo este enfoque, los desarrolladores pueden centrarse en diseñar interfaces ricas en funcionalidades con el mínimo esfuerzo.
El potencial de los multicontent slots es vasto; su correcta implementación abrirá puertas para crear aplicaciones web potentes y versátiles. Si deseas seguir explorando este tema, en la próxima clase abordaremos cómo manejar datos dinámicos a través de atributos en componentes, ¡no te lo pierdas!
Andres Felipe Pinchao Ramirez
Estudiante
Edgar Lopez Arroyo
Estudiante
Fernando Alejandro Yerena Ramos
Estudiante
Misael Valdez
Estudiante
Sebastián Buitrago
Estudiante
Christian Alvarenga
Estudiante
Héctor Eduardo López Carballo
Estudiante
Santiago Lopera Naranjo
Estudiante
Obed Paz
Estudiante
Kevin Daniel Hincapie Lumbaque
Estudiante
Jean Manzo
Estudiante
Cristhian Medina
Estudiante
Leonardo Valdivieso
Estudiante
Andrés Esteban Rodríguez Jiménez
Estudiante
Miguel Angel Reyes Moreno
EstudianteEdgar Lopez Arroyo
Estudiante
jefred bedoya
Estudiante
Jaime Ortiz
Estudiante
Pablo Nicolás Alonso
Estudiante
mateo rodriguez fierro
Estudiante
Naldo Duran
EstudianteMY NOTES FOR MULTI CONTENT SLOT Que sucede si tengo mas de una etiqueta y queremos que se renderice tambien, para esto utilizamos lo multi slots.
agregamos mas etiquetas para agregar texto como la etiqueta p y si observáramos nuestra pagina no se ve ningún cambio, solo se estaría renderizando lo del h2
¿Cómo hacemos entonces para poder renderizar otras etiquetas y agregar otro tipo de contenido?
Agregamos a nuestra etiqueta slot un atributo llamado name y este tiene que ser diferente para poder hacerle cambios individualmente a cada etiqueta.
Agregamos cualquier etiqueta nuestro componente y le agregamos el atributo slot que en este caso haria match con el name que indicamos en nuestra etiqueta.
Gran aporte!!! 👍
Podemos tener multiples <slots> en un <template>. A esto le llamamos Multi Content Slot
Para nombrar los <slots> usamos el atributo name:
<template> <slot name="title"></slot> <slot name="description"></slot> </template>
Cuando necesites agregar añadir contenido en un <slot> en específico se usa el atributo slot:
<my-element> <h2 slot="title">¡Nuevo Curso!</h3> <p slot="description">Crea componentes reutilizables con Web Components.</p> </my-element>
Que insteresante porque "slot" significa justamente: "una hendidura o un espacio al cual se puede agregar o introducir algo"
Todo lo usamos en la programacion viene del ingles si pudieramos pensar y hablar en ingles para nosotros en vez de decir nav diriamos o pensariamos menu, es una gran ventaja para las personas que hablan y piensan en ingles
¿Un componente se podría considerar una sección entera? Por ejemplo el header y footer que se repiten en varias secciones de nuestro sitio.
Hola!
El header podría ser un componente y el footer también, no ambos conforman un componente.
Si necesito hacer por ejemplo, un menú, para que el desarrollador le agrege la N cantidad de items que necesite, como puedo hacerlo? ya que no sé cuantos slots deba de crear...
Puedes hacer algo asi:
. En el Template:
<nav> <slot name="menu"></slot> </nav>
. En el HTML:
<my-element> <ul slot="menu"> <li>Let's have some different text!</li> <li>In a list!</li> </ul> </my-element>
Prefiero hacer las adiciones y estructuras con las herramientas del DOM. - No se dijo pero se puede definir un valor por defecto si adicionas contenido a la etiqueta slot.
let parragraphSlot = document.createElement('slot'); parragraphSlot.setAttribute('name', 'parragraph'); parragraphSlot.textContent = 'My default parragraph';
Más o menos me hago una idea, pero no se menciona ¿cuál sería la utilidad a nivel de performance y/o legibilidad del código? Perdonen mi ignorancia, pero no termino de encajar los puntos para completar la idea.
Al momento de definir la etiqueta en el HTML en donde pasamos el contenido del slot
<span slot="title">contenido</span>
Se puede usar cualquier etiqueta. El texto junto con su etiqueta se va a llevar al slot. O sea que afecta al componente web y su apariencia y semántica. Por eso se usa más la etiqueta span, que es más neutra.
Multi Content Slot
¿Qué pasa si necesito tener más textos en mi componente y de distintas etiquetas?
.
Esto es lo que soluciona los Multi Content Slot, estos nos permiten tener varios textos diferentes y de cualquier etiqueta como <span> o <p>.
.
Problema
. Si deseamos hacerlo directamente colocando más slots y añadiendo distintos textos primero no funcionará, segundo, no sabremos como separarlos y tercero, solo se añadirá todo el texto al primer slot:
JavaScript:
class MyElement extends HTMLElement { constructor ( ) { ... }) } getTemplate() { // Si solo hacemos esto, no se añadirá nada al <p> const template = document.createElement('template'); template.innerHTML = ` <section> <h3> <slot></slot> </h3> <div> <p><slot></slot>></p> </div> </section> ${this.getStyles()} ` return template; } ... }
HTML:
<my-element> <!-- Todo el texto se añadirá al <h3> ❌ --> Hola mundo! ¿como estan? </my-element>
Solución
.
Para que funcione debemos usar las propiedades que tiene la etiqueta slot:
.
En JavaScript debemos usar la propiedad name para crear una referencia hacia este slot:
class MyElement extends HTMLElement { constructor ( ) { ... }) } getTemplate() { const template = document.createElement('template'); template.innerHTML = ` <section> <h3> <slot **name="title"**></slot> </h3> <div> <p><slot **name="paragraph"**></slot>></p> </div> </section> ${this.getStyles()} ` return template; } ... }
Y luego en HTML solo debemos usar una etiqueta genérica como <span> para usar la propiedad slot, cuyo valor será el nombre del slot que deseamos usar:
<my-element> <!-- Ahora tendrémos un funcionamiento correcto ✔ --> <span **slot="title"**>Hola mundo!</span> <span **slot="paragraph"**>¿como estan?</span> </my-element>
Ahora podemos agregar más información en nuestros componentes y tener comportamientos mucho más específicos 😁.
Apuntes y código con comentarios:
Multi Content Slot
Si queremos agregar más información necesitamos hacer modificaciones en las diferentes etiquetas que usaremos de slot. Le agregamos el atributo <slot name="algo"></slot>. En la etiqueta HTML haremos <span slot="algo"></span> . Así vinculamos ambas etiquetas.
<my-element> <span slot="title">Soy el h2 que está en el slot de JS</span> <span slot="paragraph">Soy el p que está en el slot de JS</span> </my-element>
getTemplate(){ //*Esto será puro HTML const template = document.createElement('template'); template.innerHTML = ` <section> <h3> <slot name="title"></slot> <!---En el slot tendremos el texto que tenemos en la etiqueta de my element---> </h3> <div> <p> <slot name="paragraph"></slot> </p> </div> </section> ${this.getStyles()} <!---Aplicamos los estilos---> `; return template; }
HTML:
<my-element> <span slot="title" >Soy un texto fuera del shadow</span> <span slot="titletwo" >Soy un texto fuera del shadow dos</span> </my-element>
En template:
<h2> <slot name="title"></slot> </h2> <h3> <slot name=titletwo></slot> </h3>```
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.
Multicontent Slot: Control de Contenido Dinámico
El uso de múltiples slots permite inyectar contenido específico en lugares determinados de un componente web, manteniendo su estructura y estilos intactos.
Funcionamiento Técnico
name: Se asigna a cada etiqueta <slot> dentro del componente para identificar el destino del contenido.slot: Se utiliza en las etiquetas externas (como <span> o <div>) para realizar el match con el name del slot correspondiente.Ventajas Clave
En los slots, en lugar de pasar texto, se pueden pasar otras etiquetas?
¡Sí se puede! Fuente: arial.
para que no tengan que escribir una sola etiqueta a mano hagan esto:
div>
emmet detectera que sed puede etiquetar y les ahorrara tiempo =D
,,