Handling Forms & User Input

customElements.define('form-field', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <label>
        <span>${this.getAttribute('label')}</span>
        <input name="${this.getAttribute('name')}">
      </label>
      <div class="error"></div>
    `;
    
    this.input = this.querySelector('input');
    this.error = this.querySelector('.error');
    
    this.input.addEventListener('input', () => this.validate());
  }
  
  validate() {
    const isValid = this.input.checkValidity();
    this.error.textContent = isValid ? '' : this.input.validationMessage;
    return isValid;
  }
});