import {html, css, LitElement} from 'lit';

import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')

export class SimpleGreeting extends LitElement {

  static styles = css`p { color: blue }`;

  @property()

  name = 'Somebody';

  render() {

    return html`<p>Hello, ${this.name}!</p>`;

  }

}

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {

  static styles = css`p { color: blue }`;

  static properties = {

    name: {type: String},

  };

  constructor() {

    super();

    this.name = 'Somebody';

  }

  render() {

    return html`<p>Hello, ${this.name}!</p>`;

  }

}

customElements.define('simple-greeting', SimpleGreeting);

<simple-greeting name="World"></simple-greeting>