JavaScript Library – Lit
前言
我写过一篇关于 Lit 的文章，Material Design, Angular Material, MDC, MWC, Lit 的关系。
如今 material-web MWC 已经发布 1.0 了，估计 Angular 也会在不远的将来从 material-components-web MDC 迁移到 MWC。
以后，我们要想深入理解 Angular Material 就必须对 MWC 有一定了解，而 MWC 又是基于 Lit 开发的，所以我们也需要了解 Lit。
这篇就让我们来看看 Lit 吧。
参考
Lit 介绍
Lit 的前生是 Google 的 Polymer。它是一个帮助我们写标准 Web Components 的库。
它有 2 个特点：
- 标准 W3C Web Components
Lit 开发出来的组件是 W3C 规范的 Web Components，不像 Angular、React、Vue 那些都是仿冒的。
符合标准的好处是可以 Plug and Play，组件本身不依赖框架技术。
我用 Lit 写出来的组件，可以拿到 Angular、React、Vue 任何项目里跑。 - 提升开发体验
在不借助任何库的情况下，手写 W3C Web Components 开发体验是很差的，代码可读性也差。
Lit 主要就是为了解决这些问题而诞生的。
它借助 Decorator 和 Template literals 特性，实现了声明式定义组件和 MVVM。
Lit Getting Started
Lit 的目的是开发出 W3C Web Components，所以要掌握 Lit 就必须先掌握 W3C Web Components。
不熟悉的朋友们，请先看我以前写的这篇 DOM – Web Components。
安装
Lit 是可以用在纯 HTML、CSS、JS 上的，但是会降低开发体验。所以我还是鼓励大家用 TypeScript。
我这里搭配 Vite 做演示，你想改用 Webpack 或 Rollup 也都可以。
yarn create vite
它默认会有一些 sample code，我们洗掉它，从一个干净的开始。
index.css
* { margin: 0; padding: 0; box-sizing: border-box; }
index.ts 清空
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Lit + TS</title> <link rel="stylesheet" href="./src/index.css" /> <script type="module" src="/src/index.ts"></script> </head> <body> </body> </html>
创建组件
Web Components 是由 HTML Templates、Shadow DOM、Custom Elements 三种独立的技术搭配而成的。
而 Lit 把它们组合在一起了。
hello-world.ts
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
// 定义组件
// 取代了 window.customElements.define('hello-world', HelloWorldElement);
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
// 取代了 <template>
render() {
return html`<h1>Hello World</h1>`;
}
// 取代了 <style>
static styles = css`
h1 {
color: red;
}
`;
}
// declare type for TypeScript
declare global {
interface HTMLElementTagNameMap {
'hello-world': HelloWorldElement;
}
}
HTML 和 CSS 用了 Template literals 技术。它不像 Angular 搞 compiler 黑魔法，这个只是单纯的 JS runtime render。
Tips: template literals 对 IDE 不友好，需要插件 lit-html 和 vscode-styled-components。
使用组件
index.ts
import './hello-world'; setTimeout(() => { // 动态使用 const helloWorld = document.createElement('hello-world'); document.body.appendChild(helloWorld); }, 3000);
记得要 import 先。
index.html
<body> <!-- 静态使用 --> <hello-world></hello-world> </body>
效果
Lit の Shadow DOM
所有原生 Shadow DOM 的特性，在 Lit 都可以用。
比如：:host、<slot>、::slotted()、::part()。
除了 :host-context()，相关提问：Stack Overflow – :host-context not working as expected in Lit-Element web component
主要是因为 Firefox 和 Safari 本来就不支持 :host-context 所以 Lit 干脆就完全不支持了。可以使用 CSS Variables 作为替代方案。
从这里也能看出，Lit 实现 Web Components 的手法我们直觉认为的不太一样，它里面动了一些手脚。
Lit の Custom Elements
所有原生 Custom Elements 的特性，在 Lit 都可以用。
比如 lifecycle：connectedCallback、disconnectedCallback、attributeChangedCallback、static get observedAttributes。
Lit の MVVM
到目前为止，我们看到的 @customElement、extends LitElement、html``、css`` 只是 Lit 的小角色。
真正让 Lit 发亮起来的是它的 MVVM，这也是 W3C Web Components 最缺失的功能。
MVVM 的中心思想
MVVM 的宗旨就是不要直接操作 DOM，不要调用 DOM API，凡事都通过 MVVM 库去控制。
Lit 提供了很多种 binding、listening、query 的方式去取代 DOM 操作。
binding & listening
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
@state()
private value = 'default value';
private updateValue() {
this.value = 'new value';
}
render() {
return html`
<h1>${this.value}</h1>
<button @click="${this.updateValue}">update value</button>
`;
}
static styles = css``;
}
效果
如果你熟悉 Angular，那应该对 Lit 的语法不会感到太陌生。它俩其实挺像的。毕竟都是 Google 出品，师出同门嘛。
我们逐个来看
有一个 value 属性，@state() 表示这个属性会被用于模板。这时 Lit 就知道每当这个属性值发生变化，那就需要 re-render（它具体如何实现重渲染我不清楚，估计不会是大面积的替换，应该会做性能优化）
有一个 updateValue 方法，调用它就更新 value 属性。
把 value 属性插入模板。
@click 是一个特殊字符串，表示监听 click 事件，接着把 updateValue 方法插入模板。
至此，Lit 就掌握足够信息，可以做监听和 update DOM 了。
Attribute & Property
@state 和 @property 的区别是，一个是 private 一个是 public。
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
@property({ type: Number, attribute: 'number-value' })
numberValue!: number;
@property({ type: Boolean, attribute: 'bool-value' })
boolValue = false;
render() {
return html` <h1>${this.numberValue.toFixed(4)}</h1>
<h1>${this.boolValue}</h1>`;
}
static styles = css``;
}
外部 HTML 控制
<hello-world number-value="50" bool-value></hello-world>
外部 JS 操控
document.querySelector('hello-world')!.numberValue = 50;
document.querySelector('hello-world')!.boolValue = false;
Dispatch Event
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
private handleClick() {
this.dispatchEvent(new CustomEvent('clickhelloworld', { bubbles: true }));
}
render() {
return html`<h1 @click="${this.handleClick}">Hello World</h1>`;
}
static styles = css``;
}
外部监听
document.body.addEventListener('clickhelloworld', e => {
console.log('clicked', e.target); // <hello-world>
});
注：组件 this.dispatchEvent 的这个 this 只的是 <hello-world> 这个 element。所以 event 不需要设置 composed。
用 Lit 重写 Counter Component
在 DOM – Web Components 文章的结尾，我写了一个 Counter Component，我们现在用 Lit 重写一遍。
最终效果是这样
counter.ts
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
@customElement('counter-component')
export class HTMLCounterElement extends LitElement {
@property({ type: Number })
step = 1;
@state()
private number = 0;
private minus() {
this.number -= this.step;
}
private plus() {
this.number += this.step;
}
render() {
return html`
<div class="counter">
<button class="minus" @click="${this.minus}">-</button>
<span class="number">${this.number}</span>
<button class="plus" @click="${this.plus}">+</button>
</div>
`;
}
static styles = css`
.counter {
display: flex;
gap: 16px;
}
.counter :is(.minus, .plus) {
width: 64px;
height: 64px;
}
.counter .number {
width: 128px;
height: 64px;
border: 1px solid gray;
font-size: 36px;
display: grid;
place-items: center;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
'counter-component': HTMLCounterElement;
}
}
index.html
<counter-component step="10"></counter-component>
Lit 的局限
我们拿 material-web MWC 和 material-components-web MDC 做对比。
MDC 是传统手法，先有 HTML、CSS，然后 JS 做 binding。
MWC 是 Web Components 手法，没有 HTML、CSS，一切都是 JS 生成的。
结论就是 Lit 的渲染依赖于 JS。
如果我们用 Lit 开发企业网站，需要 SEO，那就需要搞服务端渲染 Server-side rendering。但这个目前还在 experimental 阶段。
浙公网安备 33010602011771号