Form rendering: `LitElement` integration

[vlukashov]

This approach to reactive form rendering depends on the lit-element library. Vaadin Forms taps into the LitElement's change detection mechanism and calls the renderer() method on any form property change.

• In order to render a Vaadin Form one needs to define a web component by extending LitElement and use the render() method inherited from LitElement to render a form
• Vaadin Form instances should be registered as additional source of observed properties that may trigger re-render for that component.
  • either adding a form instance as a class property and decorating it with @form
  • or by using the registration API directly: registerForm(property, clazz)
• The form properties on registered forms are available inside the render() method.
• Changes to the form state are detected by the form instance and trigger a LitElement component re-render in the same way as component's own property changes.

import { LitElement, customElement, html } from 'lit-element';
import { VaadinForm, form } from '@vaadin/form';

@customElement('field-validation')
class MyComponent extends LitElement {

  @form() form = new VaadinForm();

  render() {
    return html`
      <!-- well-known form inputs just work -->
      <div class="form-field">
        <label>User Name <input type="text" .value=${form.username}></label>
        ${form.username.touched && form.username.invalid
          ? html`<p class="error">${form.username.message}</p>`
          : ''}
      </div>

      <!-- arbitrary form inputs need explicit bindings between
          the DOM and the Vaadin Form's field instance -->
      <div class="form-field">
        <x-custom-form-field
          name="customProp"
          .value=${form.customProp.value}
          @input=${form.customProp.onInput}
          @change=${form.customProp.onChange}
          @blur=${form.customProp.onBlur}
          @focus=${form.customProp.onFocus}
        ></x-custom-form-field>
      </div>

      <button @click=${form.submit} ?disabled=${!form.canSubmit}>
        Submit
      </button>
    `;
  }
}