Custom Element: Hello, world!

hello-world.js

// import diff from 'diffhtml'

class HelloWorld extends HTMLElement {
  constructor() {
    super()
    this.name = 'world'

    this.render = this.render.bind(this)
    this.onInput = this.onInput.bind(this)

    this.render()
  }

  onInput(ev) {
    this.name = ev.target.value.trim()
    this.render()
  }

  render() {
    diff.innerHTML(this, diff.html`
      <div>
        <input type="text" placeholder="Name" oninput="${this.onInput}">
        <p>Hello, <span>${this.name}</span>!</p>
      </div>
    `)
  }
}

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

diffhtml