CustomElement

by stevenkaspar

HTML

<hello-world name='Jim'></hello-world>

<div style='color: #888'>
  right-click and change [name] attribute to watch me update
</div>

CSS

body {
  min-height: 300px
}

JavaScript

class HelloWorld extends HTMLElement {
  constructor(){
    super();
  }
  static get observedAttributes() {
    return ['name'];
  }
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'name') {
      this.innerHTML = 'Hello, ' + newValue;
    }
  }
}

customElements.define('hello-world', HelloWorld);