<mi-boton>Soy un mi-boton</mi-boton>
<mi-boton-2>Soy un mi-boton-2</mi-boton-2>

mi-boton, mi-boton-2 {
  padding: 10px;
  border: 5px solid green;
}
class MiBoton extends HTMLElement {
  constructor () {
    super();
    this.addEventListener('click', function(e){
      alert('hola');
    });
  }
}
customElements.define('mi-boton', MiBoton);


customElements.define('mi-boton-2', class extends HTMLElement {
  constructor () {
    super();
    this.addEventListener('click', function(e){
      alert('hola soy boton 2');
    });
  }
});

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

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js
  2. https://code.getmdl.io/1.3.0/material.min.js