const anotList = document.createElement('template');
anotList.innerHTML = `
  <style>
    ul {
      list-style: none;
      padding:0;
    }
  </style>
  <slot></slot>
  <ul id='list'></ul>
  <input id="text" type="text">
  <button id="add" type="button">+</button>`;

class AnotList extends AnotElement {
  constructor() {
    super();
    this.shadowRoot.appendChild(anotList.content.cloneNode(true));
    this.shadowRoot.querySelector('#add').addEventListener('click', e => this.addItem());
    this.listItem().forEach(text => this.showItem(text));
  }

  addItem() {
    let text = this.shadowRoot.querySelector('#text').value;
    if (!this.hasItem(text)) {
      this.saveItem(text);
      this.showItem(text);
    }
  }

  showItem(text) {
    var listed = new AnotItem(text);
    this.shadowRoot.querySelector('#list').appendChild(listed);
    this.shadowRoot.querySelector('#text').value = '';
    this.shadowRoot.querySelector('#text').focus();
  }
}