交互式教程#

直接从 🔗 交互式教程 开始看起, 这是一个 交互式 / 带有 playground 的学习教程, 涵盖了 Lit 的所有特性

示例#

如果要 快速入门 Lit, 🔗 examples 是一个更好的选择

TIP

从官方的教程搭配 ChatGPT 入门是最好的选择, 这可以确保你快速找到问题的答案

首先使用 vite 创建一个 Lit 项目:

pnpm create vite
✔ Project name: … lit-demo
✔ Select a framework: › Lit
✔ Select a variant: › TypeScript

Scaffolding project in /Users/xxx/projects/lit-demo...

Done. Now run:

  cd lit-demo
  pnpm install
  pnpm run dev

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

@customElement('count-button')
export class CountButton extends LitElement {
  @property()
  message = 'Count is '

  @state()
  count = 0
  handleClick() {
    this.count++
  }

  static styles = css`
    button {
      padding: 10px;
      font-size: 18px;
      border-radius: 10px;
      border-color: transparent;
    }
  `
  render() {
    return html`
      <button @click=${this.handleClick}>${this.message} ${this.count}</button>
    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'count-button': CountButton
  }
}

TIP

组件声明的标签名必须包含 -(连字符), 这确保了与浏览器内置标签不会重复

生命周期#

Lit 扩展了 Web Components 的生命周期, 分为以下三个阶段, 详见 lifecycle

1. 触发更新

当 响应式属性值更新 / 调用 requestUpdate() 时触发, Lit 会触发异步更新, 即 捕获多个属性更改并体现到一个 update 中

2. 执行更新

此时可以更新属性值, 更新后并不会触发重新 update

3. 完成更新

attribute & property#

在 Lit 中有两个很容易混淆的概念: attribute 和 property:

• attribute: 指的是元素标签上的属性, 例如 <my-element foo="bar" /> 中的 foo
• property: 指的是元素对象上的属性, 例如 document.querySelector('my-element').foo 中的 foo

TIP

相比于 attribute, property 可以接受任意类型的值, 而 attribute 只能接受字符串类型

classMap#

import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

@customElement('my-component')
export class MyComponent extends LitElements {
  // ...
  @state() private playDirection: -1 | 1 = 1;
  render() {
    return html`<div class="${classMap({ backwards: this.playDirection === -1 })}"></div>`
  }
}

repeat#

参考教程 working with lists