Getting Started

Defining Components

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

@customElement("simple-greeting")
export class SimpleGreeting extends LitElement {
  static styles = css`
    :host {
      color: blue;
    }
  `;

  @property()
  name?: string = "World";

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

Binding Data

You can bind data to a property in lit using the “.” prefix on the attribute:

render() {
  return html`
    <li>
      <input type="checkbox" .checked="${this.todo?.completed ?? false}"/>
    </li>
  `;
}

Events

Built in events

render() {
    return html`
      <input
        id="isChecked"
        type="checkbox"
        .checked="${this.todo?.completed ?? false}"
        @change="${this.onChange}"
      />
    `;
  }

  private onChange() {
    const checked = this.inputEl.checked;
		// .... do something with the data ....
  }

  private get inputEl(): HTMLInputElement {
    return this.shadowRoot?.getElementById("isChecked") as HTMLInputElement;
  }

Dispatching custom events

private onChange() {
  const event = new CustomEvent("todo-updated", {
    detail: {
      updatedTodo: this.todo?.withCompletedAs(this.inputEl.checked),
    },
  });
  this.dispatchEvent(event);
}