<super-cool-input label="Hello world"></super-cool-input>

import { LitElement, html, css } from 'https://cdn.skypack.dev/lit-element';


class SuperCoolInput extends LitElement {
  static properties = {
    label: { type: String, reflect: true },
    type: { type: String, reflect: true }
  };
  
  static styles = css`
    :host {
      display: block;
      --local-stack: "Helvetica Neue", Arial, sans-serif;
    }
    label {
      display: block;
      font-size: 16px;
      font-family: var(--x-font-stack, var(--local-stack));
      margin-block-end: 12px;
    }
    input {
      border-radius: var(--x-border-radius, 4px);
      font-size: var(--x-font-size, 16px);
      padding-block: var(--x-padding-block, 12px);
      padding-inline: var(--x-padding-inline, 8px);
    }
  `;

  type = 'text';

  render() {
    return html`
    <label for="input">${this.label}</label>
    <input type="${this.type}" @input="${this._emit}" id="input">`;
  }

  _emit(event) {
    const e = new CustomEvent('custom-input', {
      detail: event.target.value
    });

    this.dispatchEvent(e);
  }
  
  reportValue() {
    alert(this.shadowRoot.querySelector('input').value);
  }
}

customElements.define('super-cool-input', SuperCoolInput);