No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Content Slot

10/22
Recursos

Aportes 14

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Me pregunto c贸mo se manejar谩n los Multi Slots jaja 馃憖 En Vue por ejemplo son llamados 鈥渘amed 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

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鈥檚 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>

,