No tienes acceso a esta clase

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

Multi Content Slot

11/22
Recursos

Aportes 11

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

Curioso, se manejan muy similar a Vue, aunque recuerdo que en Vue se pod铆an hacer cosas a煤n m谩s raras con los slots jaja, los WebComponents tiene una manera sencilla de manejar todo esto 馃
.
Les dejo el c贸digo de esta clase.
.
Adicion del multislot

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.

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!</h2>
	<p slot="description">Crea componentes reutilizables con Web Components.</p>
</my-element>

Que insteresante porque 鈥渟lot鈥 significa justamente: 鈥渦na hendidura o un espacio al cual se puede agregar o introducir algo鈥

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';

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>
        <h2>
          <slot></slot>
        </h2>

        <div>
          <p><slot></slot>></p>
        </div>
        
      </section>
      ${this.getStyles()}
    `
    return template;
  }
	...
}

HTML:

<my-element>
	<!-- Todo el texto se a帽adir谩 al <h2> 鉂 -->
   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>
        <h2>
          <slot **name="title"**></slot>
        </h2>

        <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:

<h4>Multi Content Slot</h4>

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>
        <h2>
          <slot name="title"></slot> <!---En el slot tendremos el texto que tenemos en la etiqueta de my element--->
        </h2>
        <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:

<h1>
	<slot name="title"></slot>
</h1>
<h2>
	<slot name=titletwo></slot>
</h2>```

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

,