Custom element

by MoonScript

HTML

<script src="https://unpkg.com/@ungap/custom-elements@1.3.0/es.js"></script>
<button is="blue-button">I am blue</button>

JavaScript

class BlueButton extends HTMLButtonElement {
  constructor() {
    super()
    // for dedicated styles, remember to do this!
    this.setAttribute('is', 'blue-button');
  }
  
  connectedCallback() {
  	this.style.backgroundColor = 'blue';
    this.style.color = 'white';
  }
}

customElements.define('blue-button', BlueButton, {extends: 'button'});