Web Components核心

  1. HTML template： HTML模板
  2. Custom elements：自定义元素

  3. Shadow DOM ：隐式DOM

    中台基建架构，组件化、工程化

Google Lit

Lit 是 Google 提供的一组开源库，可帮助开发者构建快速、轻量且适用于任何框架的组件。
借助 Lit，您可以构建可共享的组件、应用、设计系统等

Lit 组件就是 DOM 中的 HTML 元素
https://lit.dev/
https://github.com/lit/lit/
https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs?hl=zh-cn
lit-element https://codelabs.developers.google.com/codelabs/lit-story-viewer?hl=zh-cn#7
npm i lit

ionic Stencil

Stencil 独立于框架的 Web Components 组件库
Stencil 是 ionic 公司的一个开源框架，构建 Web Component 的工具集，可以理解为一个编译器
类似 React 的方式去开发 Web Component 组件，像使用原生标签一样使用我们定义的组件
Web Components 的上层框架 Stencil 去实现一个基础组件库
Stencil 又可以让我们像写 React 一样高效的书写 Web Components 组件。
https://github.com/ionic-team/stencil