Lit Cheat Sheet

This page collects the most important decorators, lifecycle hooks, template bindings, and directives from across the entire course into one quick-reference cheat sheet.

How to Use This Cheat Sheet

Each table below focuses on one area of Lit: decorators, lifecycle hooks, template binding syntax, and built-in directives. Bookmark this page and use it as a lookup reference while writing components, rather than re-reading full lessons for a syntax reminder.

import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('my-el')
export class MyEl extends LitElement {
  @property() label = '';
  @state() private open = false;
  static styles = css`:host { display: block; }`;
  render() { return html`<p>${this.label}</p>`; }
}

The core shape nearly every Lit component is built around: decorators, styles, and a render method.

Core Imports Reference

import { LitElement, html, css, nothing, noChange, unsafeCSS } from 'lit';
import { customElement, property, state, query, queryAll, eventOptions } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import { when } from 'lit/directives/when.js';
import { guard } from 'lit/directives/guard.js';
import { ifDefined } from 'lit/directives/if-defined.js';

Use this section as the fastest reminder of every core import path covered in this course.
Full decorator, lifecycle, and directive tables follow below, organized by category.
Binding syntax and property options tables are further down this page.
Every entry here has a dedicated lesson earlier in this course if you need the full explanation.

Decorators Reference

Every commonly used Lit decorator in one table.

Decorator	Purpose
`@customElement('tag')`	Registers the class as a custom element
`@property(options?)`	Public, attribute-backed reactive property
`@state()`	Internal, non-attribute reactive property
`@query(selector)`	Cached reference to the first matching Shadow DOM element
`@queryAll(selector)`	Cached `NodeList` of matching elements
`@queryAsync(selector)`	Promise-based element lookup after next update
`@queryAssignedElements()`	Elements currently projected into a slot
`@eventOptions(options)`	Attaches listener options to a class-method handler

Lifecycle Hooks Reference

Every lifecycle hook covered in this course and when it runs.

Hook	Runs	Typical Use
`constructor()`	Once, on instantiation	Default property values
`connectedCallback()`	Each DOM connection	Subscriptions, data fetching
`shouldUpdate(changed)`	Before every update	Skip unnecessary renders
`willUpdate(changed)`	Before every render	Compute derived state
`render()`	Every update	Return the template
`updated(changed)`	After every render	Focus management, DOM measurement
`firstUpdated(changed)`	Once, after first render	One-time DOM setup
`disconnectedCallback()`	Each DOM removal	Cleanup subscriptions, timers

Binding Syntax and Directives Reference

Every template binding type and built-in directive in one place.

Syntax/Directive	Purpose
`attr=${value}`	Plain string attribute
`?attr=${value}`	Boolean attribute (present/absent)
`.prop=${value}`	JavaScript property (any type)
`@event=${fn}`	Event listener
`repeat(items, keyFn, tplFn)`	Keyed, efficient list rendering
`classMap({ cls: bool })`	Toggle multiple CSS classes
`styleMap({ prop: value })`	Set multiple inline styles
`when(cond, trueFn, falseFn)`	Declarative either/or rendering
`nothing`	Render/remove nothing at a binding
`guard(deps, fn)`	Skip recomputation unless deps change

Common Mistakes

Treating this cheat sheet as a substitute for understanding why each API behaves the way it does.
Forgetting that decorators require experimentalDecorators: true in tsconfig.json.
Confusing @property() (public, attribute-backed) with @state() (internal, no attribute).
Not bookmarking this page for quick lookups during real project development.

Key Takeaways

This cheat sheet consolidates decorators, lifecycle, and template/directive references in one place.
Use it as a lookup tool, not a replacement for understanding the concepts from earlier lessons.
Combine it with your project's own component code for a complete quick-reference setup.
Revisit specific lessons whenever a cheat sheet entry needs a deeper refresher.

Pro Tip

Keep this cheat sheet page open in a browser tab while building your first few real components — most developers stop needing it once the core decorators, lifecycle hooks, and binding syntax become familiar.