todo-summary.html

<template id="todo-summary">
  <label class="items-left">
    {{props.active}} {{itemsLeft}}
  </label>
  <section class="filters">
  {{#filters}}
    <button class="filter {{selected}}">
      {{desc}}
    </button>
  {{/filters}}
  </section>
  <button class="clear-completed" hidden="{{noItems}}">
    Clear completed
  </button>

  <style>
    :host {
      display: block;
      padding: 7px;
      text-align: center;
    }

    :host[active="0"][completed="0"] {
      display: none;
    }

    .items-left {
      float: left;
      font-size: 15px;
      color: #aaa;
      width: 80px;
    }

    .filters {
      margin-left: auto;
      margin-right: auto;
      width: 190px;
      display: inline-block;
    }

    .filter:first-letter {
      text-transform:capitalize;
    }

    .filter:hover {
      text-decoration: none;
    }

    .filter:focus {
      outline: none;
    }

    .filter.selected {
      border-bottom: 1px solid var(--light-red);
    }

    button {
      cursor: pointer;
      border: none;
      background: white;
      font-size: 13px;
      color: var(--gray);
      border: 1px solid transparent;
    }

    button:hover {
      text-decoration: underline;
    }

    .clear-completed {
      float: right; 
    }

    @media (max-width: 500px)  {
      .items-left, .filters, .clear-completed {
        display: block;
        width: 100%;
        float: none;
      }
    }
  </style>
</template>

<script>
  class TodoSummary extends HTMLComponent {

    init() {
      this.render()
      .on('click', '.filter', e => this.changeFilter(e))
      .on('click', '.clear-completed', e => this.emit('clear-completed'))
    }

    get total() { return this.props.active + this.props.completed }

    get noItems() { return this.total == 0 }

    get itemsLeft() {
      return `${this.props.active == 1 ? 'item' : 'items'} left`
    }

    get filters() {
      return [ 'all', 'active', 'completed' ].map(filter => {
        var selected = filter == this.props.filter ? 'selected' : ''
        return { desc: filter, selected: selected }
      })
    }

    changeFilter(e) {
      var filter = e.target.textContent.trim()
      this.update({ filter: filter })
      this.emit('change-filter', filter)
    }
  }

  TodoSummary.register()
</script>