Introduction

This tutorial explores different ways of rendering lists of items in Lit!

Lit makes it easy to render any list of items. It has built-in support for iterables: pass an array (or other iterable) to a child expression and Lit will render each item in the array. This, combined with Lit's ability to render nested templates, and JavaScript patterns for transforming lists of data into lists of templates, allows for very flexible list handling.

• Rendering lists with the map() directive.
• Transforming arrays into templates with array methods.
• Generating lists with the range() directive.
• Imperatively building arrays of items.
• Diffing lists of stateful elements with the repeat() directive.
• Using event listeners in a list.

This tutorial assumes that you've completed the Intro to Lit tutorial, or you're already familiar with some of the basics of Lit: defining a component, rendering, reactive properties, and adding an event listener.