const anotItem = document.createElement('template');
anotItem.innerHTML = `
  <style>
    li {
      padding:0.3rem;
      margin:0.2rem;
      background-color: var(--anot-item-bg, #f3f315);
    }
  </style>
  <li id="text"></li>`;

class AnotItem extends AnotElement {
  constructor(text) {
    super();
    this.shadowRoot.appendChild(anotItem.content.cloneNode(true));
    this.shadowRoot.querySelector('#text').innerHTML = text;
    this.shadowRoot.querySelector('li').addEventListener('click', e => this.rmItem(text));
  }

  rmItem(text) {
    this.remove();
    this.delItem(text);
  }
}

customElements.define('anot-title', AnotTitle);
customElements.define('anot-item', AnotItem);
customElements.define('anot-list', AnotList);
();