todolist_native-webcomponents.html

<!-- Chromium (or Google® Chrome®) only for now -->
<meta charset=utf-8>

<style>
todo-item[checked] {
  text-decoration: line-through;
  color: #888;
}
</style>


<h1>Todo list</h1>
<todo-list></todo-list>

<form>
  <input name=task>
  <button type=submit>Add</button>
</form>


<script>
const form = document.querySelector('form')
const list = document.querySelector('todo-list')
form.addEventListener('submit', event => {
  event.preventDefault()
  event.target.reset()
  list.add(event.target.task.value)
})


class TodoList extends HTMLElement {
  add(text, checked=false) {
      this.innerHTML += `
        <todo-item ${checked ? 'checked' : ''}>${text}</todo-item>`
  }
}
customElements.define('todo-list', TodoList)


class TodoItem extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = `
      <p><input type=checkbox>${this.textContent}</p>`
  }
}
customElements.define('todo-item', TodoItem)
</script>