07 - Lit — ContextQMD

Congratulations on completing the Working with lists tutorial!

Takeaways

Lit has built-in support for rendering iterables! Just place arrays, sets, maps, or generators directly into the template expression.
Use the map() directive for a declarative way of taking an iterable and transforming each item into a renderable template. Use it when all necessary state is controlled by Lit.
For complex situations involving more logic, you can build an array of renderable imperatively using the Array methods. Consider using a separate private method to abstract the related logic out of the render() method.
Use the repeat() directive when the rendered DOM nodes have state that isn't controlled by Lit, or when updating the DOM nodes is more expensive than moving them. Provide a key function that produces a unique key for each item of the iterable.
Consider using the range() directive along with map() to programmatically generate a list. These can be nested to produce a multi-dimensional grid as well.
Lastly, when adding event listeners to items rendered from a list, make sure the handler has access to the data it needs that's specific to each item. Using an inline arrow function is often a good way to achieve this by creating a closure for each item.

Further learning

Check out other built-in directives besides map(), repeat(), and range() that are available, or learn how to make your very own custom directive!

To learn more about reactive properties and the reactive update cycle that drives Lit components, try the Reactivity tutorial