Iteration

For iteration, an expression should return an array with a list of expressions. Items can be primitive values, nested templates as well as nested arrays.

html`
  <todo-list>
    ${names.map((name) => `Name: ${name}`)}

    ${items.map(({ name }) => html`<todo-item>${name}</todo-item>`)}
  </todo-list>
`;

Click and play with todo list example:

Keys

For default, array index identifies expressions for re-render. However, you can use key method provided by the result of html call for efficient re-order (it sets a key and returns update function). When the list changes and a key is found, the existing template is updated rather than a new one is created.

html`
  <todo-list>
    ${items.map(({ id, name }) => 
      html`<todo-item>${name}</todo-item>`.key(id),
    )}
  </todo-list>
`