index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TODO</title>
    <!-- <link rel="stylesheet" href="todo.css"> -->
  </head>
  <body>
    <!-- Templates first because script needs them  -->
    <!-- This first template renders all the subsequent ones -->
    <template id="todo-app">
      <todo-entry-form></todo-entry-form>
      <todo-list></todo-list>
      <todo-filters></todo-filters>
    </template>

    <template id="todo-entry-form">
      <form>
        <input type="text" placeholder="Get the milk" />
        <button type="submit" type="submit">Create Todo</button>
      </form>
    </template>

    <template id="todo-list">
      <ul></ul>
    </template>

    <template id="todo-item">
      <style>
        .done {
          text-decoration: line-through;
        }
      </style>

      <li>
        <slot name="title"></slot>
        <button class="done-button">Done</button>
        <button class="delete-button">Delete</button>
      </li>
    </template>

    <template id="todo-filters">
      <style>
        .selected {
          font-weight: bold;
        }
      </style>
      <slot name="count"></slot> items left
      <button class="all-filter selected">All</button>
      <button class="done-filter">Done</button>
      <button class="active-filter">Active</button>
    </template>

    <!-- Here we define custom elements using templates -->
    <script src="todo.js"></script>

    <!-- Instantiate the app itself with this tag -->
    <todo-app>
      <todo-entry done="true">Toggles</todo-entry>
      <todo-entry done="true">Base class</todo-entry>
      <todo-entry done="false">Toggle all items</todo-entry>
      <todo-entry done="false">Clear completed</todo-entry>
      <todo-entry done="true">Bold current filter</todo-entry>
      <todo-entry done="false">Fix issues with multiple apps per page (gobals etc.)</todo-entry>
      <todo-entry done="false">Improve re-rendering</todo-entry>
      <todo-entry done="true">Allow passing entries into the HTML tag</todo-entry>
      <todo-entry done="false">Edit item title</todo-entry>
    </todo-app>
  </body>
</html>