devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web组件构建库-Lit

作者：AllinToyou | 2024-02-18 20:23:06

赞

踩

lit框架
  1. 大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号
  2. 回复1，加入高级Node交流群

认识Lit

抽象与封装

在《你真的了解Web Component吗[1]》的分享中，我们在介绍web组件前，从理解框架和职责范围的出发点与角度，探究了框架存在和发展的意义及目标，了解到了框架可以使快速开发和基础性能之间达成平衡，进而让开发者的开发体验得到较大的提升。

而一个框架的组成，离不开优秀的设计思想，和对这些设计思想的最终实现。实现的整个过程，其实就是一个抽象与封装的过程。但是这个过程并非是框架独属的，我们可以回忆一下，日常的开发中，可以对某些频繁、重复使用的逻辑进行函数式封装；可以将某个到处使用的模版进行组件式封装；甚至我们会引用一些高质量的库去支持开发，而这些库，也是一个抽象与封装的结果。既然抽象与封装应用如此广泛，那么web component的创建与使用是不是也可以形成一个抽象与封装的产物呢？

Lit的介绍

Lit是一个轻量的库，用来快速构建web组件。其核心是LitElement基类，可以提供响应式状态、作用域样式以及高效灵活的模版系统。尽管它也是一个基于原生web组件而封装的库，但它依然保留了web组件的所有特性。不必依赖框架便可以实现组件化，并且它的使用不受框架的制约，甚至可以没有框架。

基本特点

  • 类jsx/tsx语法。

  • 模版语法类似模版字符串的写法。

  • 只支持原生css，但预编译的样式，需借助打包器编译实现后，通过特定方式引入使用。

  • 支持ts。

  • 编程模型：OOP。

  • 单向数据流，支持MVVM，但无双向绑定。

  • 组件状态管理：使用内置的@state与@property实现。

  • 职责范围小，单纯处理web组件的创建与使用。

  • 跨平台跨框架。

  • 库的体积较小，据官网说明，gzip压缩混淆后只有5k左右。

  • Lit的html模版中，可以通过(.[属性])的方式，进行自定义回调的传递(官网未说明，属于hack方式)

Lit的应用及基本原理

Demo示例

暂时无法在文档外展示此内容

基本组成及应用

基类

基类(LitElement)是lit最核心的组成，它继承了原生的HTMLElement类，并在此基础上进行了丰富的扩展。包括响应式状态、生命周期以及一些诸如控制器和混入等高级用法的提供。

ca396ddc8fecb41ac3705f0c1500ebf4.png
装饰器

可以理解为一些语法糖，用于修改类、类方法及属性的特殊函数。

  • @customElement('my-element')，注册自定义组件，相当于js中的

window.customElements.define('my-element')。

  • @eventOptions({capture: true，passive：true，once：true})，事件监听配置，相当于js中的

dom.addEventListener(eventName,func,{capture: true，passive：true，once：true})。

  • @property(options?) test：string= 'Somebody'，公共属性状态的声明; 相当于js中的

  1. constructor() {
  2.  
  3.     super();
  4.  
  5.     this.test = 'Somebody'; 
  6.  
  7.   }
  8.  
  9.   
  10.  
  11.   static get properties() {
  12.  
  13.     return {
  14.  
  15.       test: {type: String},
  16.  
  17.     }
  18.  
  19.   }

options是一个配置对象，其中包含：

  • attribute:表示声明的property是否与组件中元素的attribute建立连接，false表示不建立，true表示建立，并且attribute的名字与property同名。为string时，表示建立并且attribute的名字为该字符串。(建立连接，表示该property与attribute相互映射。)

  • converter：表示处理property与attribute之间的转换规则。

    • 默认时，attribute=》property，property为声明时类型，attribute为string；

    • 为function时，处理attribute=》property；

    • 为object时，fromAttribute处理attribute=》property；toAttribute处理property=》attribute。

  • noAccessor：表示是否监听该属性变化并自动更新，默认为false，表示监听并自动更新。为true时，表示不自动更新，需要开发者调用this.requestUpdate(propertyName, oldValue)，来进行视图更新。

  • reflect：表示是否将property的变化同步到attribute,默认false。false时，不会同步，尽管你设置了converter；为true时，会同步，根据converter的设置转换。

  • type：表示类型声明。

  • hasChanged：是一个函数，参数为value 与oldValue，分别是属性的新值与旧值。如果返回false，表示属性相关的视图不需更新；返回true则相反。

  • @state(options) protected _active = false, 内部属性状态的声明，本质上也是一个property，同样会触发视图的更新机制;相当于js中的

  1. constructor() {
  2.  
  3.     super();
  4.  
  5.     this._active = false;
  6.  
  7.   }
  8.  
  9.   
  10.  
  11.   static get properties() {
  12.  
  13.     return {
  14.  
  15.       _active: {state: true}
  16.  
  17.     }
  18.  
  19.   }

options是一个配置对象，其中包含：

  • hasChanged：同上。

  • @query('todo-list') todoList!: TodoList;获取单个dom元素，相当于js中的

document.querySelector('todo-list');

  • @queryAll('todo-lists') todoLists!: TodoLists;获取批量dom元素，相当于js中的

document.querySelectorAll('todo-lists');

  • @queryAssignedNodes(slotName, flatten, selector),用来获取对应slot元素的。

    • slotName：slot的name，string类型。

    • flatten：是否平铺，boolean类型。

    • selector：是否过滤出当前选择器的slot。

  • @queryAsync('todo-list')，同@query一样，用来获取单个dom的，只是@query是同步获取，返回的是dom对象；@queryAsync是异步获取，执行时机在dom更新完成以后，执行updateComplete的promise后执行，返回的是一个promise对象。

html模版

我们来看这样一段关于html模版的代码

  1. 。。。
  2.  
  3.   render() {
  4.  
  5.     if(this.listItems.filter(item => !item.completed).length === 0) {
  6.  
  7.       return html`<p>anything was done!</p>`;
  8.  
  9.     }
  10.  
  11.     return html`
  13.       <ul>
  15.         ${this.listItems.map((item) => html`
  16.  
  17.           <li
  18.  
  19.               class=${item.completed ? 'completed' : ''}
  20.  
  21.               @click=${() => this.toggleCompleted(item)}>
  22.  
  23.             ${item.text}
  24.  
  25.           </li>`,
  27.   )}
  29.       </ul>
  31.     `;
  32.  
  33.   }
  34.  
  35.   。。。

可以看到Lit的html渲染是在render函数中进行的。通过html方法和模版字符串的结合，实现渲染。并且语法类似jsx/tsx。可以直接在render函数和html模版中写js逻辑。非常的灵活与方便。

样式

  • Lit本身只支持原生css，使用css方法添加样式，方式如下：

  1. //只有一组style
  2.  
  3. import {customElement, css} from 'lit-element';
  4.  
  5. @customElement('my-element')
  6.  
  7. export class MyElement extends LitElement {
  8.  
  9.   static styles = css`
  11.     p {
  13.       color: green;
  15.     }
  17.   `;
  18.  
  19.   。。。
  20.  
  21. }
  22.  
  23.  
  24.  
  25. //多组style
  26.  
  27. import {css} from 'lit-element';
  28.  
  29. static styles = [ 
  30.  
  31.     css`h1 {
  33.       color: green;
  35.     } `, 
  36.  
  37.     css`h2 {
  39.       color: red;
  41.     }`
  42.  
  43. ];
  44.  
  45.  
  46.  
  47. //引入样式文件
  48.  
  49. import {css，unsafeCSS} from 'lit-element';
  50.  
  51. import style from './my-elements.less';//需要使用编译工具编译后倒入
  52.  
  53.   static styles = [
  54.  
  55.     css`:host {
  57.     width:500px;
  59.   }`,
  60.  
  61.     css`${unsafeCSS(style)}`
  62.  
  63.     ];

  • Lit允许在css中书写表达式

这就意味着你可以在某个ts文件中声明一组样式，然后引入到多个文件中使用：

  1. //样式中使用表达式
  2.  
  3. static get styles() {
  4.  
  5.   const mainColor = 'red';
  6.  
  7.   return css`
  9.     div { color: ${unsafeCSS(mainColor)} }
  11.   `;
  12.  
  13. }

  • 动态样式

可以想vue或react中一样，动态的使用class和style。

  1. import {customElement, property，LitElement, html, css} from 'lit-element';
  2.  
  3. import {classMap} from 'lit/directives/class-map.js';
  4.  
  5. import {styleMap} from 'lit/directives/style-map.js';
  6.  
  7.  
  8.  
  9. @customElement('my-element')
  10.  
  11. export class MyElement extends LitElement {
  12.  
  13.   @property()
  14.  
  15.   classes = { someclass: true, anotherclass: true };
  16.  
  17.   @property()
  18.  
  19.   styles = { color: 'lightgreen', fontFamily: 'Roboto' };
  20.  
  21.   protected render() {
  22.  
  23.     return html`
  25.       <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>
  27.         content
  29.       </div>
  31.     `;
  32.  
  33.   }
  34.  
  35. }
slot插槽

  • 概念

关于插槽的概念理解，其实可以直接类比vue中的slot插槽，因为lit本身是一个纯js库，所以lit的插槽完全是来源于原生web component技术所提供的规范，而vue的slot功能，参考来源正是原生的slot。

  • 注意⚠️

    • 默认情况下，如果一个自定义元素有存在shadow dom，那么它的子元素是不会渲染的。

  1. <my-element test-word="test-word" testWord="testWord">
  2.  
  3.     <div>我是子元素</div>
  4.  
  5.   </my-element>
9becf71eedca2a1df818e9a2d98d8989.png

  • 预置slot中的内容，可以在对应子元素渲染前，起到兜底的作用。

  • slot的使用

    • 匿名slot，只需要预置一个slot，那么所有的子元素都可以被安排呈现。

  1. //html
  2.  
  3.     <my-element test-word="test-word" testWord="testWord">
  4.  
  5.     <div>我是子元素1</div>
  6.  
  7.     <div>我是子元素2</div>
  8.  
  9.     <div>我是子元素3</div>
  10.  
  11.   </my-element>
  12.  
  13.   //ts
  14.  
  15.   render() {
  16.  
  17.     return html`
  19.       <slot></slot>
  21.     `;
  22.  
  23.   }
8879b895017dd0e7a3e262c91dc8c1d7.png

  • 具名slot，只根据对应的name呈现，其他的被忽略

  1. //html
  2.  
  3.   <my-element test-word="test-word" testWord="testWord">
  4.  
  5.     <div slot="child1">我是子元素1</div>
  6.  
  7.     <div>我是子元素2</div>
  8.  
  9.     <div>我是子元素3</div>
  10.  
  11.   </my-element>
  12.  
  13.   
  14.  
  15.   //ts
  16.  
  17.     render() {
  18.  
  19.     return html`
  21.       <slot name="child1"></slot>
  23.     `;
  24.  
  25.   }
206e8de775ee4ec0e6db6a80bc96601b.png

  • slot的生命周期

可以通过在slot元素上面绑定slotchange事件，来获取slot被插入或删除的时机，以及对应的事件对象。

  1. //html
  2.  
  3.   <my-element test-word="test-word" testWord="testWord">
  4.  
  5.     <div slot="child1">我是子元素1</div>
  6.  
  7.   </my-element>
  8.  
  9.   //ts
  10.  
  11.   
  12.  
  13.   handleSlotchange(e:Event) {
  14.  
  15.     console.log(e);
  16.  
  17.   }
  18.  
  19.  
  20.  
  21.   render() {
  22.  
  23.     return html`
  25.       <slot name="child1"  @slotchange=${this.handleSlotchange}></slot>
  27.     `;
  28.  
  29.   }
  30.  
  31. }
cc9eec07273cb274597ef86135b11f9d.png
事件通信

在Lit中，也是内置了事件通信的逻辑。事件通信主要是两部分组成，注册监听和调度触发。

  • 注册监听，采用@[事件名]的方式，在组件上注册事件；使用e.detail来回去通信内容。

  1. 。。。
  2.  
  3.   private addList(e: CustomEvent){
  4.  
  5.     this.listItems = [...this.listItems,{
  6.  
  7.       text:e.detail,
  8.  
  9.       completed: false,
  10.  
  11.     } as ToDoItem];
  12.  
  13.     this.todoList.requestUpdate();
  14.  
  15.   }
  16.  
  17. 。。。
  18.  
  19.   render() {
  20.  
  21.     return html`
  23.     。。。
  25.       <controls-area @addList=${this.addList}></controls-area>
  27.     。。。
  29.     `;
  30.  
  31.   }
  32.  
  33.   。。。

  • 调度触发，使用dispatchEvent进行调度，使用CustomEvent构造函数及固定的结构来实例化通信传输的事件对象。

  1. ...
  2.  
  3.   private sendText(){
  4.  
  5.     const options = {
  6.  
  7.       detail: this.inputText,
  8.  
  9.     };
  10.  
  11.     this.dispatchEvent(new CustomEvent('addList', options));
  12.  
  13.     this.inputText = '';
  14.  
  15.   }
  16.  
  17. ...
生命周期及更新流程

Lit采用批量更新的方式来提高性能和效率。一次设置多个属性只会触发一次更新，然后在微任务定时异步中执行。

状态更新时，只渲染 DOM 中发生改变的部分。由于 Lit 只解析并创建一次静态 HTML ，并且后续只更新表达式中更改的值，所以更新非常高效。

  • 更新流程

    • 当属性被set时，属性的setter被触发(属性的监听通过defineProperty完成)。

    • 然后将触发组件的requestUpdate。

    • 此时若该属性设置了hasChanged函数，那么等待该函数返回值来决定是否继续更新。若没有设置hasChanged函数，则直接对比新旧值。

    • 新旧值不一致时，触发异步更新，调用组件的update方法。如果发现已经触发了一次更新，那么执行最后一个更新。

    • 触发更新后，将更新的property再次映射到attribute中，并渲染html。

  • 生命周期

lit中的生命周期分为两类，一类是原生组件化提供的生命周期，一般不需要开发者主动去使用。另一类是lit的状态更新提供的生命周期，如下：

6e0ec03f40d51cc550d8a5a9fd55a05b.png06554cb8666b3ade0c29f82a5e88dab7.png655caa582f5e5de6ca72ef0b80d53855.png

  • requestUpdate

执行了requestUpdateInternal方法，并返回了更新结果的promise。requestUpdateInternal方法中主要进行了两个操作，一个是将更新的属性存在一个map中，以备后续使用。另一个是进行一些比较判断，决定是否调用_enqueueUpdate方法。而_enqueueUpdate调用了performUpdate方法。

  • performUpdate

performUpdate方法中执行了shouldUpdate，shouldUpdate返回false则中断，若返回true，则依次执行willUpdate、update、firstUpdated和updated。

  • willUpdate

ts中不存在willUpdate，是js的polyfill-support 的覆盖点，源码中函数内容为空。

  • Update

主要执行了_propertyToAttribute函数，将property向attribute映射，覆盖render渲染出来的html。

  • Render

render函数只执行一次,用来解析并创建静态 HTML。

  • firstUpdated

是一个覆盖点，源码中为空。元素首次更新完毕触发，只执行一次。此方法中设置属性，会在本次更新完毕后再次触发更新。

  • updated

是一个覆盖点，源码中为空。元素每次更新完毕触发。此方法中设置属性，会在本次更新完毕后再次触发更新。

  • updateComplete

是函数_getUpdateComplete的返回值，本质上是一个promise对象，表示当前更新全部完毕。

  1. protected _getUpdateComplete() {
  2.  
  3.     return this.getUpdateComplete();
  4.  
  5.   }
  6.  
  7.  protected getUpdateComplete() {
  8.  
  9.     return this._updatePromise;
  10.  
  11.  }

高阶应用

指令

如上面的动态样式一样，classMap和styleMap属于应用在html模版中的指令。开发者可以直接使用内置指令进行开发；也可以根据自己的需要，进行自定义指令的开发。

  • 内置指令

  • classMap - 将类列表设置为基于对象的元素

  • styleMap - 将样式属性列表设置为基于对象的元素

  • repeat - 将值从可迭代对象渲染到 DOM 中

  • templageContent- 呈现<template>元素的内容

  • unsafeHTML - 将字符串呈现为 HTML

  • unsafeSVG - 将字符串呈现为 SVG

  • cache - 更改模板时缓存呈现的 DOM

  • guard - 仅在其依赖项之一发生变化时重新更新模板

  • ifDefined - 如果值已定义，则设置该属性，如果未定义，则删除该属性

  • live - 采用严格的‘===’检查实时DOM值与表达式的值，不相等便触发更新。

  • until - 呈现占位符内容，直到一个或多个Promise解决

  • asyncAppend- 将 AsyncIterable 的promise结果插入到 DOM 中

  • asyncReplace- 将 AsyncIterable 的promise结果替换到 DOM 中

  • ref - 获取dom节点

  • 自定义指令

自定义指令的功能很强大，尽管在使用中看起来只是调用了一个函数，但实际上，内部包含了自己的生命周期(constructor、render、update)，不仅如此，指令还能获得与它关联的底层 DOM 的特殊访问。

这里我们实现一个简单的指令：

  • 首先声明一个继承了Directive类的自定义指令类。

  • 内部定义生命周期的钩子函数render，将传入的字符串修改后返回。

  • 使用directive实例化，并向外暴露。

  1. //自定义指令的文件
  2.  
  3. import {Directive, directive} from 'lit/directive.js';
  4.  
  5.  
  6.  
  7. class FormatStr extends Directive {
  8.  
  9.   render(test:string) {
  10.  
  11.     return `${test}!!!`;
  12.  
  13.   }
  14.  
  15. }
  16.  
  17. export const formatStr = directive(FormatStr);
  1. //使用自定义指令的文件
  2.  
  3. import {formatStr} from '../directives/formatStr';
  4.  
  5. import {html} from 'lit';
  6.  
  7. 。。。
  8.  
  9. render(){
  10.  
  11.     html`<div>${formatStr('hellow')}</div>`
  12.  
  13. }
  14.  
  15. 。。。
1233a09fbd7f963deff572938d9bb706.png
混和

混合本身的作用，是为了在类之间共享代码。而类混合，本质上是属于原生类的一种行为，由于Lit是一个原生的js库，所以它可以拿来直接使用。目的也很简单，为了封装抽象。在Lit中使用类混合，我们可以在复用代码的同时，做一些定制化的扩展。下面我们实现一个混合。

这里我们声明一个混合类的方法，使得调用这个函数后生成的类，拥有公共的方法，就是在组件连接主文档后进行一次打印，打印的结果，是当前组件自己的name属性。

  1. /* eslint-disable no-unused-vars */
  2.  
  3. import {LitElement} from 'lit';
  4.  
  5.  
  6.  
  7. type Constructor<T = {}> = new (...args: any[]) => T;
  8.  
  9.  
  10.  
  11. export const TestMixin = <S extends Constructor<LitElement>>(superClass: S) => {
  12.  
  13.   class MyMixinClass extends superClass {
  14.  
  15.     constructor(...args: any[]) {
  16.  
  17.       super();
  18.  
  19.       this.name = 'TestMixin';
  20.  
  21.     }
  22.  
  23.     name:string;
  24.  
  25.     connectedCallback() {
  26.  
  27.       super.connectedCallback();
  28.  
  29.       setTimeout(()=>{
  30.  
  31.         console.log(this.name);
  32.  
  33.       },3000)
  34.  
  35.     }
  36.  
  37.   }
  38.  
  39.   return MyMixinClass as S;
  40.  
  41. }

这里是使用的文件：

  1. //TodoList.ts
  2.  
  3. export class TodoList extends TestMixin(LitElement) {
  4.  
  5.   constructor() {
  6.  
  7.     super();
  8.  
  9.     this.name = 'TodoList';
  10.  
  11.   }
  12.  
  13.   name:string;
  14.  
  15.   }
  16.  
  17.  
  18.  
  19.  //ControlsArea.ts
  20.  
  21.  export class ControlsArea extends TestMixin(LitElement) {
  22.  
  23.   constructor() {
  24.  
  25.     super();
  26.  
  27.     this.name = 'ControlsArea';
  28.  
  29.   }
  30.  
  31.   name:string;
  32.  
  33.   }

这里是打印结果，分别会在连接到主文档3s后打印各自的name。

5cb4b038e247448b4686b84173302fc9.png
控制器

控制器是Lit中，又一个封装抽象的概念，它区别于组件和混合。它没有视图，也不封装视图；它拥有同宿主绑定的生命周期，但是不存在状态更新的机制。相对于混合的代码共用，它更像是实现功能共用。

与宿主交互的相关方法：

  • addController：同宿主绑定。

  • removeController：同宿主解除绑定。

  • requestUpdate：更新宿主视图。

  • updateComplete：获取宿主更新完毕的promise。

有四个可以与宿主绑定的生命周期：

  • hostConnected：宿主连接主文档时执行。

  • hostUpdate：宿主将property向attribute映射完毕(update)后，render之前执行。

  • hostUpdated：在组件每次更新完毕(updated)后执行。

  • hostDisconnected：宿主与主文档断开连接时执行。

实现一个简单的控制器：

  1. //声明控制器
  2.  
  3. import {ReactiveControllerHost} from 'lit';
  4.  
  5.  
  6.  
  7. export class MouseController {
  8.  
  9.   private host: ReactiveControllerHost;
  10.  
  11.   pos = {x: 0, y: 0};
  12.  
  13.  
  14.  
  15.   _onMouseMove = ({clientX, clientY}: MouseEvent) => {
  16.  
  17.     this.pos = {x: clientX, y: clientY};
  18.  
  19.     this.host.requestUpdate();
  20.  
  21.   };
  22.  
  23.  
  24.  
  25.   constructor(host: ReactiveControllerHost) {
  26.  
  27.     this.host = host;
  28.  
  29.     host.addController(this);
  30.  
  31.   }
  32.  
  33.  
  34.  
  35.   hostConnected() {
  36.  
  37.     window.addEventListener('mousemove', this._onMouseMove);
  38.  
  39.   }
  40.  
  41.  
  42.  
  43.   hostDisconnected() {
  44.  
  45.     window.removeEventListener('mousemove', this._onMouseMove);
  46.  
  47.   }
  48.  
  49. }
  50.  
  51.  
  52.  
  53. //使用控制器
  54.  
  55. import {MouseController} from '../controller/mouseController';
  56.  
  57. export class ControlsArea extends TestMixin(LitElement) {
  58.  
  59.   constructor() {
  60.  
  61.     super();
  62.  
  63.   }
  64.  
  65.  
  66.  
  67.   private mouse = new MouseController(this);
  68.  
  69.  
  70.  
  71.   render() {
  72.  
  73.     return html`
  75.     <pre>
  77.         x: ${this.mouse.pos.x as number}
  79.         y: ${this.mouse.pos.y as number}
  81.       </pre>
  83.     `;
  84.  
  85.   }
  86.  
  87. }

生态相关

Github starissue数量（未解决/总数）npm下载量被依赖数量维护团队开源协议文档年龄背书公司
8.7k895c15ee58c4359e743264e71031453a.png171/20842fcb217050ebaab6d3e52b195948ea40.pngc37128cf1d769232969ad6a27a9256d0.pnglit团队BSD-3-Clause5c6634f447678c3e982bc51839a003bc.pnghttps://lit.dev/4无

路由

Lit官方并未提供路由，但是社区提供了：

lit-element-router传送门：https://www.npmjs.com/package/lit-element-router

共享状态管理

Lit官方并未提供共享状态管理，但是社区提供了：

lit-element-state传送门：https://www.npmjs.com/package/lit-element-state

开发插件(vscode)

语法高亮（lit-plugin）
1153094c05e71748b0e687534f6ef5bc.png

c7a42ae1421e0c031fb78e4bd82668dd.png48d59762a804b0d49ff9449235dc13a6.png

高亮前 高亮后

代码片段（LitElement Snippet）
18a6e92dfe9d2f2867e38facdee974e0.png

887ed9f445a3651e3e84ec10f99c167a.gif2f28a4bca4ebd7efa9ca5d74b1aec02d.gif

js下代码片段提示 ts下代码片段提示

SSR

支持ssr，并且官方提供了对应的工具包：

@lit-labs/ssr ：https://www.npmjs.com/package/@lit-labs/ssr

github地址

https://github.com/lit/lit/

测试工具

lit是标准的js工具库，可以使用任何js测试工具。

https://lit.dev/docs/tools/testing/

依赖Lit的组织及项目

29b831076d263af684801c5275162997.png

同类框架/库比较

e7657c0972ed5a0fb03be96f383f092e.png

可以看到lit的下载量遥遥领先。当然，这并不意味着lit就是最好的，毕竟不同的场景，有不同的选型。但至少可以确定一点，lit的应用场景相对是比较多的，这也是下载量不断飙升的原因。

依赖Lit的开源组件库

名称官网github开源协议背书公司
Spectrum Web Componentshttps://opensource.adobe.com/spectrum-web-components/https://github.com/adobe/spectrum-web-componentsApache Licenseadobe
Momentum UI Web Componentshttps://momentum-design.github.io/momentum-ui/?path=/story/components-accordion--accordionhttps://github.com/momentum-design/momentum-ui/tree/master/web-componentsMITcisco
material-componentshttps://github.com/material-components/material-components-web#readmehttps://github.com/material-components/material-webApache License 2.0google
frontend uihttps://github.com/home-assistant/frontend/blob/dev/README.mdhttps://github.com/home-assistant/frontendApache Licensehome-assistant
carbon-web-componentshttps://web-components.carbondesignsystem.com/https://github.com/carbon-design-system/carbon-web-componentsApache License 2.0IBM
Lion Web Componentshttps://lion-web.netlify.app/https://github.com/ing-bank/lionMIT LicenseING
PWA Starterhttps://github.com/pwa-builder/pwa-starter/blob/main/README.mdhttps://github.com/pwa-builder/pwa-starterMIT Licensemicrosoft

以上只提供了部分背书公司较知名的组件库(均为国外组件库，国内目前暂无知名的相关组件库)。用以观察借鉴，规避踩坑。

其他相关参考

lit项目所有者：https://github.com/orgs/lit/people =》https://github.com/e111077

lit项目被依赖关系：https://github.com/lit/lit/network/dependents

Lit-element npm包地址：https://www.npmjs.com/package/lit-element

框架对比网站：https://www.npmtrends.com/lit-element-vs-svelte-vs-@stencil/core

参考资料

[1]

你真的了解Web Component吗: https://juejin.cn/post/7010580819895844878


  1. Node 社群
  2.  
  3.  
  4.  
  5. 我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
  6.  
  7.    “分享、点赞、在看” 支持一波
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/110325
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。