在本节中，你将在播放方向改变时动态更改 word-viewer 的颜色。

classMap 指令是一个 Lit 指令，可以动态切换元素上的类列表。classMap 接受一个对象作为参数，其中每个键被视为一个类名，如果值为真值，则该类会被添加到元素上。

当 this.playDirection 为 -1 时，为 <pre> 元素添加 backwards 类。

// word-viewer.ts

  render() {
    ...
    return html`<pre
      class="${classMap({ backwards: this.playDirection === -1 })}"
      ...
    >${word}</pre>`;
  }

// word-viewer.js
import {classMap} from 'lit/directives/class-map.js';
...

  render() {
    ...
    return html`<pre
      class="${classMap({ backwards: this.playDirection === -1 })}"
      ...
    >${word}</pre>`;
  }

现在当 this.playDirection === -1 时，<pre> 元素会获得 backwards 类。使用你的开发者工具来确认这一点！

添加 .backwards 的选择器和样式。

// word-viewer.ts

  static styles = css`
    ...
    .backwards {
      color: white;
      background-color: violet;
    }
  `;

// word-viewer.js

  static styles = css`
    ...
    .backwards {
      color: white;
      background-color: violet;
    }
  `;

预览中的 word-viewer 在反向播放时应该会变成紫色。