<button is="mi-boton-extendido">Soy un mi-boton</button>

body {
  padding: 16px;
}

button[is="mi-boton-extendido"] {
  padding: 10px;
  font-weight: bold;
}
class MiBotonExtendido extends HTMLButtonElement {
  constructor () {
    super();
    this.addEventListener('click', function (e) {
      alert('hola');
    });
  }
  
  static get ceName () {
    return 'mi-boton-extendido';
  }
  
  get is () {
    return this.getAttribute('is');
  }
  
  set is (value) {
    this.setAttribute('is', value || this.ceName );
  }
}

customElements.define(MiBotonExtendido.ceName, MiBotonExtendido, { extends: 'button' });

// Puedes crear un nuevo elemento usando la API del DOM
const miBoton = document.createElement('button', { is: MiBotonExtendido.ceName });
// De esta forma el atributo html is no es seteado = miBoton.setAttribute('is', 'mi-boton-extendido');
// Es por eso que se hace manualmente
miBoton.is = MiBotonExtendido.ceName;
miBoton.textContent = 'Otra istancia de mi-boton, Dame click';
document.body.appendChild(miBoton);
console.log(miBoton.getAttribute('is'));

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://code.getmdl.io/1.3.0/material.indigo-pink.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.