Web Components, the React way, without Shadow DOM

todo.js

// https://medium.com/@bdc/web-components-the-react-way-8ed5b6f4f942
const store = (() => {
  let state;
  return todos => {
    if (todos) {
      state = todos;
      render("todo-list");
    }   
    return state;
  };  
})();

const render = (component, parent = document.body) =>
  parent.innerHTML = `<${component}></${component}>`;

customElements.define("todo-item", class extends HTMLElement {
  static get observedAttributes() {
    return ["index"];
  }
  attributeChangedCallback(name, old, change) {
    this.index = change;
  }
  connectedCallback() {
    this.innerHTML = `
      <label>
        <input type=checkbox>
        ${this.innerHTML}
      </label>
    `;
    this.querySelector("input").addEventListener("click", () =>
      store(store().filter((todo, index) => index != this.index)));
  }
});

customElements.define("todo-list", class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <ul>
        ${store().map((todo, index) => `
          <li>
            <todo-item index=${index}>
              ${todo}
            </todo-item>
          </li>
        `).join("")}
      </ul>
    `;
  }
});

store(["Buy milk", "Call Sarah", "Pay bills"]);

Linked blogpost https://hackernoon.com/web-components-the-react-way-8ed5b6f4f942#.5em3zpgin is down. Can you please check its link?

updated the link, but I suggest you to have a look at 🔥 heresy 🔥 which is a far superior client/server experience 👋

Thanks @WebReflection. I will definitely check heresy.

Wow this is amazing. Thanks!