Now that you've got some of the basics, we'll introduce a more complicated element. In the remainder of this tutorial, you'll build a to-do list component. Here we've provided some of the boilerplate for your to-do-list.

Since the list items are private to the component, the _listItems property is defined as internal reactive state. It works just like a reactive property, but it isn't exposed as an attribute, and shouldn't be accessed from outside the component. For more information, see Public properties and internal state.

You can use standard JavaScript in Lit expressions to create conditional or repeating templates. In this step, you'll use map() to turn an array of data into a repeating template.

• Render list items.

  Add the following expression between the start and end tags for the unordered list (<ul>).

    ${this._listItems.map((item) =>
      html`<li>${item.text}</li>`
    )}

  Note the nested html inside the map() callback. For more information, see Lists and repeating templates.

• Add the click handler.

  We've provided an input and an Add button, but they aren't hooked up yet. Add the input property and an event handler method for the button:

  @query('#newitem')
  input!: HTMLInputElement;
  
  addToDo() {
    this._listItems = [...this._listItems,
        {text: this.input.value, completed: false}];
    this.input.value = '';
  }

  get input() {
    return this.renderRoot?.querySelector('#newitem') ?? null;
  }
  
  addToDo() {
    this._listItems = [...this._listItems,
        {text: this.input.value, completed: false}];
    this.input.value = '';
  }

  The @query decorator (used in the TypeScript version of the code) is a handy way of getting a reference to a node in your component's internal DOM. It's equivalent to this code in the JavaScript version:

  get input() {
    return this.renderRoot?.querySelector('#newitem') ?? null;
  }

Try entering a new item and clicking Add.