By the end of this step, the shown word will automatically change every second.

This can be achieved by using setInterval, a browser function which repeatedly calls a function with a fixed delay between each call.

Define a method tickToNextWord bound to the component that will increment this.idx.

// word-viewer.ts

  render() {
    ...
  }

  tickToNextWord = () => { this.idx += 1; };

// word-viewer.js

  render() {
    ...
  }

  tickToNextWord = () => { this.idx += 1; };

Calling this method increments our reactive internal state idx which will schedule an update.

To setup the interval and clean up the interval, use the standard custom element lifecycle callbacks connectedCallback, and disconnectedCallback.

connectedCallback is invoked when the component is added to the DOM, and disconnectedCallback is invoked when the component is removed from the DOM.

// word-viewer.ts

  private intervalTimer?: number;

  connectedCallback() {
    super.connectedCallback();
    this.intervalTimer = setInterval(this.tickToNextWord, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.intervalTimer);
    this.intervalTimer = undefined;
  }

// word-viewer.js

  intervalTimer;

  connectedCallback() {
    super.connectedCallback();
    this.intervalTimer = setInterval(this.tickToNextWord, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.intervalTimer);
    this.intervalTimer = undefined;
  }

When the word-viewer is attached to the DOM, connectedCallback is invoked and setInterval repeatedly calls this.tickToNextWord every 1000ms, or every second.

The interval ID is stored on this.intervalTimer which does not need to be reactive.

When word-viewer is removed from the DOM, disconnectedCallback is invoked cleaning up the interval, and this.tickToNextWord is no longer called.

The preview should be cycling over individual words.