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()
  }
}