Basic Templates
- Hello World (TypeScript)
- Basic example of the key features of LitElement.
- Hello World (JavaScript)
- LitElement can be authored in vanilla JS as well.
This page is a quick list of code samples to get you started with Lit if you're new to it!
Rendering & Templating
- Basic templating concepts
- Use properties, arrays, and conditionals in a template.
- Binding to different parts of a template
- Bind to attributes, boolean attributes, properties, text content, and event handlers in a template.
- Slotting children
- Render children with the <slot> element.
- Template composition
- Compose a template from other templates by calling methods in a template expression.
- Element composition
- Compose a template from other custom elements.
Specific Solutions
- List Separators in lit-html
- How to add commas between list items with `Array.map`.
- Async Task / NPM Info element
- Shows an example of an async Task controller. This one fetches npm package info and renders based on the state of the fetch.
- _getUpdateComplete()
- How to make a parent element wait for an inner child to render.
- LitElement Goo / React Hooks
-
An example of how to achieve hooks-like "chaining" of reactive
values through several stateful transforms using a "controller"
pattern.
Ported from the React Goo demo here.
Cross-Framework
- Using a LitElement in React
- Shows a <chess-board> element, implemented in LitElement (older implementation), used inside React.