Tabifit: Web Components: Botón con texto

boton-con-texto.html

<boton-texto id="comenzar">
  Comenzar
</boton-texto>

<template id="boton-texto">
  <style>
    button {
      padding:16px;
      border-radius:25px; 
      max-width:320px;
      background-color: #4AB4DC;
      font-size:16px;
      text-transform: uppercase;
      color: #ffffff;
      border: none;
      font-weight: 600;
    }
  </style>         
  <button>
    <slot>Boton</slot>
  </button>
</template>

script.js

class Componente extends HTMLElement {
  constructor(referenciaTemplate) {
    super();
    const template = document.querySelector(referenciaTemplate);
    const templateContent = template.content;
    this.attachShadow({ mode: "open" })
      .appendChild(templateContent.cloneNode(true));
  }
}

class BotonTexto extends Componente {
  constructor () {
    super("#boton-texto");
  } 
}

class BotonIcono extends Componente {
  constructor () {
    super("#boton-icono");
  } 
}


customElements.define("boton-texto", BotonTexto);