07

In this section you will dynamically change the color of the word-viewer when the play direction changes.

The classMap directive is a Lit directive that can dynamically toggle a list of classes on an element. classMap takes an object as an argument in which each key is treated as a class name, and if the value is truthy, the class is added to the element.

Add the backwards class to the <pre> element when this.playDirection is -1.

{% switchable-sample %}

// 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>`;
  }

{% endswitchable-sample %}

Now when this.playDirection === -1, the <pre> element will gain the class backwards. Use your developer tooling to confirm this!

Add a selector and styles for .backwards.

{% switchable-sample %}

// word-viewer.ts

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

// word-viewer.js

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

{% endswitchable-sample %}

The word-viewer in the preview should turn violet when playing backwards.