const anotList = document.createElement('template'); anotList.innerHTML = ` `; 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(); } }