Web Components: Usando <slot>

slot.html

<template id="tabifit-boton">
  <button>
    <slot name="icono-izquierdo"></slot>
    <slot name="etiqueta">Botón</slot>
    <slot name="icono-derecho"></slot>
  </button>
</template>

<tabifit-boton>
  <span slot="icono-izquierdo">🦜</span>
  <label slot="etiqueta">Adoptar un loro</label>
</tabifit-boton>

<tabifit-boton>
  <span slot="icono-derecho">🦜</span>
  <label slot="etiqueta">Adoptar un loro</label>
</tabifit-boton>

slot.js

function cargarTemplate(referenciaTemplate, instanciaComponente) {
    const template = document.querySelector(referenciaTemplate);
    const templateContent = template.content;
    instanciaComponente.attachShadow({ mode: "open" })
      .appendChild(templateContent.cloneNode(true));
  }

class TabifitBoton extends HTMLElement {
  constructor() {
    super();
    cargarTemplate('#tabifit-boton', this);
  }
}

customElements.define('tabifit-boton', TabifitBoton);

web-components-usando-slot.markdown

Web Components: Usando <slot>

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.