const template = document.createElement('template');
template.innerHTML = `
  <h1>
    Hello <slot name="name"></slot>
  </h1>`;


class HelloWorld extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
  }
}
    
customElements.define('hello-world', HelloWorld);

<hello-world>
  <span slot="name">NDC</slot>
</hello-world>
<hello-world>
  <span slot="name">Oslo</slot>
</hello-world>

// Todo API
let worker
export default function saveTodo(todo) {
  if (!worker) {
    worker = new Worker('worker.mjs')
    worker.onmessage = mutate
  }
  
  worker.postMessage({ 
    data: todo
  })
}

const store = Store()
function mutate(result) {
  const copy = Array.from(store.todos)
  copy.push(result)
  store.todos = copy
}

// worker.js
self.onmessage = async function message({ data }) {
  try {
    const result = await (await fetch(
      `/todos/${data.key}`, {
          body: payload,
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'POST'
        }
    )).json()

    self.postMessage(result)
  }
  catch (err) {
    console.error(err)
  }
}

// Todo API
let worker
export default function saveTodo(todo) {
  if (!worker) {
    worker = new Worker('worker.mjs')
    worker.onmessage = mutate
  }
  
  worker.postMessage({ 
    data: todo
  })
}

const store = Store()
function mutate(result) {
  const copy = Array.from(store.todos)
  copy.push(result)
  store.todos = copy
}

// store.js
function subscribe (fn, props) {
  return listeners.push(fn)
}
function unsubscribe (fn) {
  return listeners.splice(listeners.indexOf(fn), 1)
}
_state.subscribe = subscribe
_state.unsubscribe = unsubscribe
function notify () {
  listeners.forEach(fn => {
    fn(payload)
  })
}
const handler = {
  set: function (obj, prop, value) {
    if (obj[prop] !== value) {
      obj[prop] = value
      set(notify)
    }
    return true
  }
}
const store = new Proxy(_state, handler)

// todo-list.js
class TodosList extends HTMLElement {
  constructor () {
    super()
    this.api = API()
    this.update = this.update.bind(this)
  }

  connectedCallback () {
    this.api.subscribe(this.update, [ 'todos' ])
  }

  disconnectedCallback () {
    this.api.unsubscribe(this.update)
  }

  update ({ todos }) {
    const activeTodos = todos.filter(t => !t.completed)
    const completedTodos = todos.filter(t => t.completed)
    this.activeTodosList.todos = activeTodos
    this.completedTodosList.todos = completedTodos
  }
}