lit-html

Awesome Lit

> 精选的精彩 Lit 资源列表.

Lit — 一个用于构建快速、轻量级 Web 组件的简单库.

Lit 的核心是一个样板杀死组件基类，它提供反应状态、作用域样式和一个小巧、快速且富有表现力的声明性模板系统.

General resources

• Documentation
• Tutorial
• Playground
• Blog

Community

• GitHub
• GitHub Discussions
• Twitter
• Slack
• Stack Overflow
• YouTube

Overview

• Lightning-fast templates & Web Components: lit-html & LitElement
• Lit 2.0: Meet Lit, all over again!
• Announcing Lit 2 stable release

Starter Templates

• LitElement JavaScript starter - 使用带有 JavaScript 的 LitElement 的示例组件.
• LitElement TypeScript starter - 使用 LitElement 和 TypeScript 的示例组件.
• hello-web-components - 使用 Lit 用 TypeScript 编写的简单入门 Web 组件.
• Lit Sass JavaScript Starter - 使用 Rollup 对 SASS + JS + Lit 进行简单设置的项目.
• Lit Sass TypeScript Starter - 使用 Rollup 对 SASS + TS + Lit 进行简单设置的项目.
• Lit Webpack Starter - 使用 Webpack 的带有 Lit 和 Typescript 的多页应用程序的启动器.
• Open Web Components Generator - 基于 Open Web Components Recommendations 的入门应用程序.
• pwa-starter - PWABuilder pwa-starter 的 LitElement 版本.
• pwa-lit-template - 按照现代 Web 标准构建渐进式 Web 应用程序.
• Vite Lit Element TS SASS - 使用 Lit 2、Typescript 和 SASS 的示例 Vite 项目.
• Vite Lit Starter - Vite 的基于光照的模板预设.
• Vite Lit TS Starter - Vite 的基于 Lit 和 TypeScript 的模板预设.

Codelabs

• Build a Brick Viewer with lit-element
• Build a Story Component with lit-element
• From Web Component to Lit Element
• lit-html & lit-element: basics
• lit-html & lit-element: intermediate
• Lit for React Developers

Tutorials

• Building a Rich Text Editor with Lit
• Draggable DOM with Lit
• Getting started with LitElement and TypeScript
• Here's a minimalist no-frills Redux Toolkit & LitElement example
• JSON to HTML Table with Lit
• lit-html Part 1 - A solution for DOM management in web components
• lit-html Part 2 - Working with attributes and properties
• Lit and Figma
• Lit and Flutter
• Lit and Monaco Editor
• Lit and VSCode Extensions
• Lit Sheet Music
• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
• Recreating The Arduino Pushbutton Using SVG And <lit-element>
• Routing Management with LitElement and TypeScript
• Some things to know about Lit

Examples

• Lit Basics - 一些例子概述了一般的 Lit 概念.
• Lit Native - 在本机平台上重用 Lit Web 组件.
• Lit Node Editor - 使用画布 API 和简单的图形数据结构构建的节点编辑器.
• Lit 3D Piano - 使用 Lit、Three.js 和 Tone.js 构建的 3D 钢琴.
• Open Web Components Examples - 使用 Lit 的常见模式的代码示例.
• Polymer → Lit Migration Guide - 代码示例显示从 Polymer 到 Lit 的迁移指南.
• Vite + RxDB + Lit - 使用 Vite 运行 RxDB 的最小示例.

Lit Labs

• @lit/localize - 用于本地化使用 Lit 构建的 Web 应用程序的库和命令行工具.
• @lit-labs/ssr - 用于服务器端渲染 Lit 模板和组件的包.
• @lit-labs/motion - 点亮指令让事情动起来.
• @lit-labs/react - 针对 Web 组件和反应式 Lit 控制器的反应集成.
• @lit-labs/scoped-registry-mixin - LitElement 的 Mixin，与推测性的 Scoped CustomElementRegistry polyfill 集成以评估提案并促进反馈.
• @lit-labs/task - 呈现异步任务的 Lit 控制器.
• @lit-labs/virtualizer - 为 Lit 提供虚拟滚动的包.

Extensions

• @adobe/lit-mobx - 使用带有 Lit 的 mobx 的 Mixin 和基类.
• @apollo-elements/lit-apollo - LitElement 与 Apollo GraphQL 的集成.
• @shoelace-style/localize - 用于本地化自定义元素的微型库，为 Lit 提供指令.
• @stefanholzapfel/lit-state - Lit 2 的轻量级反应状态管理.
• @vaadin/form - 一组用于使用 TypeScript 和 Lit 构建表单的实用程序.
• dark-theme-utils - 使用 Web 组件构建的用于暗模式的有用实用程序.
• exome - 支持 Lit 的深层嵌套状态的状态管理器.
• pure-lit - 将您的 Lit 元素注册为纯函数.
• lit-element-effect - LitElement 的效果挂钩.
• lit-element-state-decoupler - 用于 LitElement 组件外部状态处理的实用程序.
• lit-redux-router - 由 pwa-helpers 和 Redux 提供支持的 Lit 的声明性路由方式.
• lit-svelte-stores - 点亮控制器以使用苗条的存储作为状态管理.
• lit-vaadin-helpers - 在 Lit 2 中使用 Vaadin Web 组件的助手.
• ullr - 使用 Lit 通过函数式编程构建 Web 组件.

Design Systems

• AXA Pattern Library - 使用 LitElement 构建的 AXA CH UI 组件库.
• Brightspace UI core - 用于构建 Brightspace 应用程序的 Web 组件集合.
• Carbon Custom Elements - 基于 Web 组件的碳设计系统变体.
• Clarity Core Web Components - Clarity Design System 的 Web 组件套件.
• Kor - 一个开源设计系统和轻量级 UI 组件库.
• Lion - 高性能、可访问且灵活的 Web 组件.
• Material Web Components - Material Design 实现为 Web 组件.
• Momentum UI Web Components - 基于 Momentum Design 的 UI 组件集.
• Outline Design System - 基于 Web 组件的设计系统入门套件.
• Pharos Design System - JSTOR 的设计系统可创造具有凝聚力、支持性和美丽的体验.
• Shoelace - 基于与框架无关的技术构建的专业设计的 UI 组件的集合.
• Spectrum Web Components - 使用 LitElement 构建的 Adob​​e Spectrum 设计语言实现.
• UI5 Web Components - 基于原生 API 的企业风味糖！

Component Libraries

• Apollo Elements - 自定义元素符合 Apollo GraphQL.
• Blackstone UI - 用于创建使用 lit-html 和 LitElement 构建的界面的 Web 组件.
• Chartjs Web Components -chartjs 的 Web 组件.
• Clever components - 由 Clever Cloud 制作的 Web 组件集合.
• Curvenote - 用于创建交互式科学文章的 Web 组件.
• ESP Web Tools - 允许通过浏览器刷入 ESPHome 或其他基于 ESP 的固件.
• Furo Webcomponents - 企业级 Web 组件集，最适合与 Eclipse Furo 配合使用.
• Fusion Web Components - Equinor Fusion 使用的一系列 Web 组件.
• Ignite UI Web Components - 来自 Infragistics 的完整 UI 组件库.
• LRNWebComponents - ELMS:LN 为任何项目生成 Web 组件.
• Medblocks UI - 用于快速开发 openEHR 和 FHIR 系统的 Web 组件.
• Microsoft Graph Toolkit - Microsoft Graph 的 Web 组件集合.
• Mutation testing elements - 使用 Web 组件进行突变测试结果的模式以对其进行可视化.
• One Platform Components - Red Hat One Platform 的一组 Web 组件.
• Playground Elements - 使用 Web 组件的无服务器代码体验.
• Stripe Elements - Stripe.js v3 元素的自定义元素包装器.
• Titanium Elements - Leavitt Group Enterprises 使用的轻量级 Web 组件的集合.
• Vidstack Elements - 符合规范的可定制、可扩展、可访问和通用的媒体元素.
• VSCode Webview Elements - 用于创建使用 Webview API 的 VSCode 扩展的组件.
• Web Components for TEI Publisher - TEI Publisher 使用的 Web 组件及其生成的应用程序.
• Webmarkets web components - Webmarkets 的公共 Web 组件集.
• Wired Elements - 出现手绘元素的集合.
• Wokwi Elements - Arduino 和各种电子部件的 Web 组件.

Standalone Components

• <api-viewer> - Web 组件的 API 文档和现场操场.
• <app-datepicker> - 使用 LitElement 和 Material Design 2 构建的 Datepicker 元素.
• <burgton-button> - 易于使用、可定制且易于访问的汉堡按钮元素.
• <code-block> - 使用 Prism.js 和 LitElement 显示彩色格式代码的 Web 组件.
• <codesandbox-button> - 单击时显示 CodeSandbox 演示的自定义元素.
• <granite-qrcode-generator> - 使用 qr.js 库生成和呈现 QR 码的自定义元素.
• <helium-animated-pages> - 用于创建使用 Lit 构建的 CSS 动画的 Web 组件.
• <json-viewer> - 用于在树视图中可视化 JSON 数据的 Web 组件.
• <light-gallery> - Lit 的全功能 JavaScript 图像和视频库.
• <lit-datatable> - 数据表的 Material Design 实现，由 LitElement 提供支持.
• <lottie-player> - 用于轻松嵌入和播放 Lottie 动画的 Web 组件.
• <model-viewer> - 用于渲染交互式 3D 模型的 Web 组件.
• <rapi-doc> - 用于查看 OpenAPI 3.0 和 Swagger 2.0 规范的 Web 组件.
• <round-slider> - 使用 Lit 构建的简单圆形滑块 Web 组件.
• <stl-part-viewer> - LitElement Web 组件，利用 Three.js 显示 STL 模型文件.

Tools

Building

• babel-plugin-lit-property-types-from-ts - Babel 插件，用于根据 TypeScript 类型注释为 Lit 组件中声明的反应性属性设置 type.
• babel-plugin-template-html-minifier - Babel plugin for minifying HTML in tagged template strings.
• esbuild-plugin-lit-css - ESBuild 插件将 css 文件导入为 JavaScript 标记模板文字对象.
• lit-css-loader - Webpack 加载器将 css 文件作为 JavaScript 标记模板文字对象导入.
• lit-scss-loader - 用于将 CSS/SCSS 导入 Lit 组件的 Webpack 加载器.
• rollup-plugin-lit-css - 汇总插件将 css 文件导入为 JavaScript 标记模板文字对象.
• rollup-plugin-minify-html-literals - Rollup 插件以缩小标记模板字符串中的 HTML.
• rollup-plugin-postcss-lit - 在 Lit 组件中加载 PostCSS 处理过的样式表的 Rollup 插件.

Linting

• eslint-plugin-lit - 用于 Lit 模板字符串的 ESLint 插件.
• eslint-plugin-lit-a11y - Lit 模板的可访问性 linting 插件.
• lit-analyzer - 类型检查 Lit 模板中的绑定的 CLI.

IDE Plugins

• vscode-lit-html - lit-html 模板字符串的语法高亮和智能感知.
• vscode-lit-plugin - lit-html 的语法高亮、类型检查和代码完成.
• es6-string-html - VSCode 扩展，它为 ES6 多行字符串中的 HTML 提供语法高亮显示.
• vim-html-template-literals - 标记模板文字内 HTML 的语法突出显示和缩进.

TypeScript Plugins

• ts-lit-plugin - 为 Lit 模板添加类型检查和代码完成的插件.
• typescript-lit-html-plugin - 为 Lit 模板添加 IntelliSense 的 TypeScript 服务器插件.

Other Tools

• @custom-elements-manifest/analyzer - 用于为 Web 组件生成 API 文档的 CLI 工具.
• Storybook for web-components - 用于普通 Web 组件片段的 UI 开发环境.
• web-components-codemods - 与 lit-html 模板文字兼容的 Web 组件的 Codemods.
• Web Component DevTools - 用于使用 Web 组件的开发人员的浏览器扩展.
• Web Component Factory - 用于生成、构建、测试和发布 Web 组件的 CLI 工具.

CDN

以下内容交付网络提供了 Lit 的 ES 模块版本：

• cdn.esm.sh
• jsDelivr CDN
• JSPM CDN
• Skypack CDN
• unpkg.com

See this issue 其中讨论了 CDN 分发的静态构建.

Integrations

• Bridgetown Lit Renderer - SSR + 布里奇敦点燃组件的水合作用.
• Fable.Lit - Collection of tools to embed HTML code into F# code with the power of Lit.
• Ruby2JS - 最小但可扩展的 Ruby 到 JavaScript 的转换.

Videos

• Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)
• lit-HTML (Chrome Dev Summit 2017)
• Lit Beta Launch Event (2021)
• Lit 2.0 Release Livestream
• VDOM vs lit-html - HTTP203
• Declarative Reactive Web Components with Justin Fagnani
• Building a Complex Application with Web Components and LitElement

Podcasts

• The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals - lit-html 创作者 Justin Fagnani 的一集.
• ShopTalk Show 348: Getting lit-html with Justin Fagnani - 贾斯汀·法格纳尼 (Justin Fagnani) 作为嘉宾的另一集.

Archive

以下文章参考了旧版本的 lit-html 和 LitElement.

• Render HTML with Vanilla JavaScript and lit-html
• A gentle introduction to lit-html
• lit-html templates from zero to hero
• Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup
• Let's Build Web Components! Part 5: LitElement
• LitElement To Do App
• LitElement with Rollup, Babel & Karma
• A new, lean way of creating web apps
• The future of Polymer & lit-html
• A night experimenting with Lit-HTML
• Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack
• Building a chat with Twilio, lit-html, Parcel and TypeScript

Similar libraries

这些库与 Lit 无关，但使用类似的概念构建. 他们使用html标记 模板文字，并利用相同的好处 IDE Plugins 用于语法高亮.

• haunted - React 的 Hooks API，但适用于标准 Web 组件和 hyperHTML 或 lit-html.
• htm - Hyperscript Tagged Markup：使用标准标记模板的 JSX 替代方案，具有编译器支持.
• hybrids - UI 库，用于使用简单且功能强大的 API 创建 Web 组件.
• lit-ntml - Node.js 中 SSR 的轻量级和现代模板，灵感来自 lit-html.

Other awesome resources

如果您想要更多精彩资源，请查看 awesome 列表！

---

License