todo-app in 25 lines

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents.min.js"></script>
    <script data-require="slim.js@2.6.4" data-semver="2.6.4" src="https://cdn.rawgit.com/eavichay/slim.js/v2.6.4/Slim.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <todo-app></todo-app>
    <hr/>
    <a href="http://slimjs.com" target="_blank">Created with slim.js</a>
  </body>

</html>

Slim.tag('todo-app',
`<input #new_item_input type="text" keydown="handleKeyDown" placeholder="Add todo..." />
<todo-item slim-repeat="items" slim-repeat-as="item" on-remove="handleRemove"></todo-item>`,
class extends Slim {
  onBeforeCreated() {
    this.items = [
      {text:"learn slim.js (http://slimjs.com)"},
      {text:"Create awesome apps with web components"}];
  }
  handleKeyDown(e) {
    if (e.which === 13) {
      this.items.push({ text: e.target.value });
      this.new_item_input.value = '';
    }
  }
  handleRemove(index) {
    this.items.splice(index, 1);
  }
});

Slim.tag('todo-item',
`<div><button click="handleDeleteClick">X</button> <span bind>[[item.text]]</span></div>`,
class extends Slim {
  handleDeleteClick() {
    this.callAttribute('on-remove', this.data_index);
  }
})

/* Styles go here */