select-list.ts

class SelectListElement extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("click", e => {
      let target = e.target as Element;
      while (target.parentElement !== this) {
        target = target.parentElement;
      }
      if (target instanceof SelectItemElement) {
        e.stopPropagation();
        let changed = false;
        for (let el of this.children) {
          if (el === target) {
            changed = el.hasAttribute("selected");
            el.setAttribute("selected", "");
          } else {
            el.removeAttribute("selected");
          }
        }
        if (changed) {
          this.dispatchEvent(new Event("change", { bubbles: true }));
        }
      }
    });
  }
  get value(): string {
    for (let el of this.children) {
      if (el instanceof SelectItemElement && el.hasAttribute("selected")) {
        return el.value;
      }
    }
    return null;
  }
}
customElements.define("select-list", SelectListElement);

class SelectItemElement extends HTMLElement {
  constructor() {
    super();
  }
  get value(): string {
    return this.getAttribute("value");
  }
}
customElements.define("select-item", SelectItemElement);