Uso de Multicontent Slot en Componentes Web

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 “slot” significa justamente: “una 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:

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

,