在本步骤结束时，你将能够在 word-viewer 上设置 words 属性，Lit 会将其设置到你的 WordViewer 类的一个属性上。

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

这可以通过 Lit 的一个叫做响应式属性的功能来实现。定义一个响应式属性 words：

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

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

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

Lit 响应式属性是特殊的属性，可以与 Lit 的渲染生命周期交互。如果响应式属性 words 发生变化，组件会调度一次更新。默认情况下，Lit 会为该属性设置属性同步，当属性变化时会更新对应的属性值。

你现在应该能在预览中看到 initial value。

在继续之前，切换到 index.html 文件，通过属性来设置 words。

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

预览现在应该显示 👋.from.html。