lit Web组件:构建快速、轻量级的 Web 组件

21-12-24 banq

Lit 是一个简单的库,用于构建快速、轻量级的 Web 组件。
Lit 的核心是一个杀手级模板:提供一些组件基类,包括:提供反应reactive状态、作用域样式和一个小巧、快速且富有表现力的声明性模板系统。
Lit 建立在 Web Components 标准之上,添加了让您快乐和高效所需的一切:反应性、声明性模板和一些周到的功能,以减少样板并让您的工作更轻松。每个 Lit 功能都经过精心设计,考虑到了 Web 平台的演变。
约为 5 KB(缩小和压缩),Lit 有助于保持包大小小和加载时间短。渲染速度非常快,因为 Lit 在更新时只接触 UI 的动态部分——无需重建虚拟树并将其与 DOM 进行比较。
每个 Lit 组件都是本机 Web 组件,具有互操作性的超能力。Web 组件可以在您使用 HTML 的任何地方使用,可以使用任何框架或根本不使用。这使 Lit 成为构建可共享组件、设计系统或可维护、面向未来的站点和应用程序的理想选择。

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

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

  @property()
  name = 'Somebody';

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


自定义元素:

@customElement

Lit 组件是标准的自定义元素,因此浏览器将它们视为内置元素。在手写的 HTML 或框架代码中使用它们,从您的 CMS 或静态站点构建器输出它们,甚至在 JavaScript 中创建实例——它们只是工作!
 

范围样式:

static styles = css`p { color: blue }`;

默认情况下,Lit 使用Shadow DOM限定您的样式。这使您的 CSS 选择器保持简单,并确保您的组件的样式不会影响 - 也不会受到 - 页面上的任何其他样式的影响。
 

反应属性:

@property()

声明反应性属性以对组件的 API 和内部状态进行建模。每当反应性属性(或相应的 HTML 属性)发生变化时,Lit 组件都会有效地重新渲染。
 

声明式模板:

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

Lit 模板基于标记的模板文字,简单、富有表现力且快速,具有内联原生 JavaScript 表达式的 HTML 标记。无需学习自定义语法,无需编译。
 

1