Custom native webcomponents demo

components.js

class Component extends HTMLElement {
  constructor() {
    super()
    this.onclick = event => this.click(event)
    this.props = this.getProps()

    for(let prop in this.props) {
      if(this.hasAttribute(prop)) {
        this.props[prop] = this.getAttribute(prop)
      }
    }
    let shadowRoot = this.attachShadow({mode: 'open'})
    this.update()
  }

  setProp(name, value) {
    this.setAttribute(name, value)
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this[`${name}Changed`] && this[`${name}Changed`](oldValue, newValue)
    this.props[name] = newValue
    this.update()
  }

  update() {
    this.shadowRoot.innerHTML = this.render()
  }
}

index.html

<my-button></my-button>
<my-button number="5" color="red"></my-button>

<script src=components.js></script>
<script src=my-button.js></script>

my-button.js

class MyButton extends Component {
  getProps() {
    return {
      'number': 0,
      'color': 'white'
    }
  }

  static get observedAttributes() {
    return ['number', 'color']
  }

  click() {
    console.log("you clicked me")
    this.update()
  }

  render() {
    return `
      <style>
        button {
          display: block;
        }
        button {
          color: ${this.props.color};
        }
      </style>
      <button><p>My number is: ${this.props.number}</p>,
        <small>I'm ${this.props.color}</small></button>
    `
  }
}
customElements.define('my-button', MyButton)