hello-world.ts

import { showNotification } from '@vaadin/flow-frontend/a-notification';
import '@vaadin/vaadin-button';
import '@vaadin/vaadin-text-field';
import { css, customElement, html, LitElement } from 'lit-element';

@customElement('hello-world-view')
export class HelloWorldView extends LitElement {
  name: string = '';

  static get styles() {
    return css`
      :host {
        display: block;
        padding: 1em;
      }
    `;
  }
  render() {
    return html`
      <vaadin-text-field label="Your name" @value-changed="${this.nameChanged}"></vaadin-text-field>
      <vaadin-button @click="${this.sayHello}">Say hello</vaadin-button>
    `;
  }
  nameChanged(e: any) {
    this.name = e.target.value;
  }

  sayHello() {
    showNotification('Hello ' + this.name);
  }
}