You can add encapsulated styles to a Lit component. Here the starting code is carried over from last step, but we've added the ability to mark an item as completed by clicking on it.

In this step you'll add some styles for completed items.

• Add a static styles class field.

  static styles = css`
    .completed {
      text-decoration-line: line-through;
      color: #777;
    }
  `;

  Styles defined in the static styles class field are scoped to the component using shadow DOM. For more information, see Styles and Working with shadow DOM.

• Add classes to your item template

  Replace the existing line, class="TODO" with the following expression:

  class=${item.completed ? 'completed' : ''}

  A ternary expression is a handy way of adding conditional logic to a template. If you want to set more than one class at a time, you can use Lit's classMap directive, instead.