Uso de Multicontent Slot en Componentes Web
Contenido del curso
Andres Felipe Pinchao Ramirez
Edgar Lopez Arroyo
Fernando Alejandro Yerena Ramos
Misael Valdez
Sebastián Buitrago
Christian Alvarenga
Héctor Eduardo López Carballo
Santiago Lopera Naranjo
Obed Paz
Kevin Daniel Hincapie Lumbaque
Jean Manzo
Cristhian Medina
Leonardo Valdivieso
Andrés Esteban Rodríguez Jiménez
Miguel Angel Reyes Moreno
Edgar Lopez Arroyo
Kenneth Angulo L
Seba Cardoso
Jefred Bedoya
Jaime Ortiz
Pablo Nicolás Alonso
mateo rodriguez fierro
Naldo Duran
MY 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>```
¿Es posible usar cualquier etiqueta para inyectar?
Sí, tienes total libertad para usar cualquier etiqueta HTML válida desde el exterior para inyectar tu contenido, siempre y cuando le agregues el atributo slot correspondiente. Por ejemplo, puedes usar etiquetas semánticas como <article>, <figure>, o simplemente un <span> o <div> genérico. La magia de los Web Components radica en que el componente interno ya tiene definidas las reglas de presentación (como un <h2> para el título o un <p> para el cuerpo). Tu etiqueta externa simplemente actúa como un vehículo de transporte para llevar el texto o los elementos hacia adentro. Una vez que el contenido hace match y entra al componente, adoptará la estructura y los estilos encapsulados que diseñaste originalmente, dándote una flexibilidad increíble sin sacrificar la consistencia del diseño.
Gracias
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
,,