By the end of this step, you'll be able to set an attribute words on your word-viewer, which Lit will set to a property on your WordViewer class.

<word-viewer words="👋.from.html"></word-viewer>

This can be achieved with a Lit feature called Reactive Properties. Define a reactive property words:

class WordViewer extends LitElement {
  @property() words = 'initial value';
  ...
}

class WordViewer extends LitElement {
  static properties = {
    words: {},
  };

  constructor() {
    super();
    this.words = 'initial value';
  }
  ...
}

Lit Reactive Properties are special properties that can interact with Lit's render lifecycle. If the reactive property words changes, the component schedules an update. By default, Lit sets up attribute synchronization for the property and will update the property when the attribute changes.

You should now see initial value in the preview.

Before moving on, change to the index.html file and set words from an attribute.

<!-- index.html -->
<word-viewer words="👋.from.html"></word-viewer>

The preview should now show 👋.from.html.