Me pregunto cómo se manejarán los Multi Slots jaja 👀 En Vue por ejemplo son llamados “named slots” y es básicamente ponerle un nombre a todos los slots que creas.
.
Esto se me hace interesante porque estamos trabajando directamnte desde JavaScript… aunque usar WebComponents puede tener algunas desventajas de las que ya hablaré más adelante 🤔
.
Les dejo el código de esta clase:
.
Adicion de slots
Introducción a los Web Components
Introducción a los Web Components
¿Qué problemas resuelven los Web Components?
¿Qué son los Web Components?
APIs de Web Components
Beneficios de Web Components
Ciclo de vida de los Web Components
Ciclo de vida de un componente
Web Components
Custom Elements
Template
Shadow DOM
Manejo de datos
Content Slot
Multi Content Slot
Atributos
attributeChangedCallback
disconnectedCallback
Estilos en Componentes
:host
::slotted
CSS custom properties
Proyecto
Presentación del proyecto
Estructura base de nuestro componente
Atributos en nuestro componente
Web Components de terceros
Utilizando componentes de terceros
Conclusiones
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Content Slot
10/22Recursos
Aportes 14
Preguntas 2
Ordenar por:
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.
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
Puedo sentir como aumenta mi poder con cada clase 😄
.
Se me parece un poco a svelte
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>
<h2>
**<slot></slot>**
</h2>
</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>
Apuntes + código con comentarios:
<h3>Manejo de datos</h3> <h4>Content Slot</h4>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>
<h2>
<slot></slot> <!---En el slot tendremos el texto que tenemos en la etiqueta de my element--->
</h2>
</section>
${this.getStyles()} <!---Aplicamos los estilos--->
`;
return template;
}
¿Que estamos haciendo? => estamos haciendo contenido dinamico. that’s all
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.
En este video que les comparto, quise profundizar un poco mas de los HTMLTemplates y de los Slots
https://youtu.be/ol7sNBoZ1Q4
HTML:
<my-element>Soy un texto fuera del shadow</my-element>
en mi template:
<h1>
<slot></slot>
</h1>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.