Lit3 学习笔记

Lit

Lit 是一个用来快速构建 Web Components 的轻量级库，具有简单、快速、原生标准的特点。

本文使用 Vite 的 Lit 模板进行演示

目录

• 定义组件
• 注册组件
• 样式系统
• 属性与响应式
• 生命周期

---

定义组件

快速入门

使用 Lit 创建一个简单的组件非常容易：

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

@customElement("hello-world")
export class HelloWorld extends LitElement {
  static styles = css`
    span {
      color: red;
      font-size: 18px;
    }
  `;

  render() {
    return html`<span>Hello World</span>`;
  }
}

核心概念：

• 使用 render() 方法返回 html 模板标签来渲染 DOM
• Lit 没有虚拟 DOM，只构建一次，后续通过更新属性值实现响应式更新

---

注册组件

TypeScript 方式（推荐）

使用装饰器注册组件：

import { customElement } from "lit/decorators.js";

@customElement("hello-world")
export class HelloWorld extends LitElement {
  // ...
}

JavaScript 方式

使用原生 API 注册：

customElements.define("hello-world", HelloWorld);

使用组件

在 HTML 中直接使用自定义元素：

<hello-world></hello-world>

工作流程： 定义 → 注册 → 导入 → 使用

---

样式系统

定义样式

使用静态 styles 属性定义组件样式：

import { css } from "lit";

export class MyElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 16px;
    }
  `;
}

样式复用

支持数组形式，便于样式组合和复用：

static styles = [
  commonStyles,
  css`
    .custom {
      color: blue;
    }
  `
];

:host 选择器

:host 选择器指向组件的宿主元素本身：

static styles = css`
  :host {
    display: block;
  }
  
  :host([disabled]) {
    opacity: 0.5;
  }
`;

CSS 变量

CSS 变量是唯一能穿透 Shadow DOM 的样式，用于实现主题定制：

static styles = css`
  span {
    color: var(--text-color, #333);
    font-size: var(--font-size, 14px);
  }
`;

外部重写样式：

<hello-world style="--text-color: red; --font-size: 18px;"></hello-world>

---

属性与响应式

定义响应式属性

使用 @property 装饰器定义响应式属性：

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

@customElement("hello-world")
export class HelloWorld extends LitElement {
  @property({ type: String })
  name = "World";

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

在构造函数中初始化

如需在构造函数中修改属性，确保先调用 super()：

constructor() {
  super();
  this.name = 'Lit';
}

使用属性

通过 HTML 属性传值：

<hello-world name="Lit"></hello-world>

通过 JavaScript 修改属性（响应式）：

const element = document.querySelector("hello-world");
element.name = "Hello, Lit! Updated";

属性选项

@property 装饰器支持多个选项：

@property({
  type: String,           // 类型转换
  attribute: 'user-name', // 自定义 HTML 属性名
  reflect: true,          // 反射到 HTML 属性
  converter: ...,         // 自定义转换器
  hasChanged: ...         // 自定义变化检测
})
name = 'default';

常用类型： String、Number、Boolean、Array、Object

---

生命周期

Lit 与 Vue 3 生命周期对比

Lit 生命周期	Vue 3 生命周期	说明
constructor	setup	实例创建
connectedCallback	onMounted	元素插入 DOM
willUpdate	beforeUpdate	更新前（属性变化）
render	render	渲染模板
firstUpdated	onMounted (DOM ready)	首次渲染完成（可访问 DOM）
updated	onUpdated	每次更新后
disconnectedCallback	onUnmounted	元素从 DOM 移除

常用生命周期钩子

firstUpdated

首次渲染完成后调用，适合初始化 DOM：

firstUpdated() {
  const button = this.shadowRoot.querySelector('button');
  button?.focus();
}

updated

每次属性变化并重新渲染后调用，可访问旧值：

updated(changedProperties: Map<string, any>) {
  if (changedProperties.has('name')) {
    console.log('name 属性已变化');
  }
}

---

总结

• 轻量高效：无虚拟 DOM，基于浏览器原生 Web Components
• 响应式属性：使用装饰器轻松定义响应式数据
• 样式隔离：Shadow DOM 天然隔离，CSS 变量支持主题定制
• 标准化：完全基于 Web 标准，可在任何框架中使用

---

更多信息请访问 Lit 官方文档