export class TextField extends HTMLElement {
  field: HTMLInputElement;

  static get observedAttributes() {
    return ["placeholder", "text"];
  }

  constructor() {
    super();

    this.field = document.createElement("input");
  }

  get placeholder(): string | null {
    return this.getAttribute("placeholder");
  }

  set placeholder(text: string | null) {
    if (text) {
      this.setAttribute("placeholder", text);
    } else {
      this.removeAttribute("placeholder");
    }
    this.field.placeholder = text || "";
  }

  get text(): string | null {
    return this.getAttribute("text");
  }

  set text(text: string | null) {
    if (text) {
      this.setAttribute("text", text);
    } else {
      this.removeAttribute("text");
    }
    this.field.placeholder = text || "";
  }

  connectedCallback() {
    this.appendChild(this.field);
  }
}