你还不懂 Web Components，启动？

最新推荐文章于 2025-11-30 00:31:57 发布
原创 最新推荐文章于 2025-11-30 00:31:57 发布 · 1.5k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

Web Components是W3C制定的一套规范，它允许开发者创建可复用的自定义元素，这些元素可以像普通的HTML元素一样在DOM中使用。这些自定义元素封装了结构、样式和脚本，并且具有明确的接口，以便在其他Web应用中使用。

Web Components 主要包括以下部分：

  • Custom Elements：允许开发者定义自己的HTML元素，这些元素具有封装好的结构、样式和脚本。Custom Elements的接口可以让开发者在自定义元素上添加属性和方法，以扩展HTML的功能。

  • Shadow DOM：为自定义元素提供了一个隔离的DOM环境，使得自定义元素的样式和脚本不会影响到其他元素。Shadow DOM使得开发者可以在自定义元素内部使用CSS和JavaScript，而不用担心样式冲突或脚本相互干扰的问题。

  • HTML Templates：提供了一种定义自定义元素结构模板的方式。通过HTML Templates，开发者可以创建包含插槽（slot）的模板，然后在实例化自定义元素时，将内容填充到相应的插槽中。

本文就来分享九个值得使用和学习的 Web Components 开源项目，带你走进 Web Components 的世界！

Lit

Lit 是一个基于 Web Components 标准的 JavaScript 库，它提供了一系列的工具和 API ，使得创建高性能、动态、可重用的 Web 组件变得更加容易。Lit 的特点包括：

  • 轻量级：Lit 的代码库非常小巧，压缩后只有不到 10KB，这使得它使用起来非常方便，加载速度也很快。

  • 编程简洁：Lit 提供了一组简单的 API，并且支持使用 JavaScript 模板字符串进行 HTML 的快速构建，降低组件编写的难度。

  • 可扩展性强：Lit 不仅支持原生的 Web Components 标准 API，还提供了一些自定义的组件 API，可以更加方便地实现高级功能。

  • 生态丰富：Lit 社区活跃，提供了许多常用的外部库和组件，可以帮助开发者快速搭建复杂的应用程序。

图片

Github：https://github.com/lit/lit

Fast Element

Fast Element 是一个基于 Web Components 标准的开源 UI 库，由 Microsoft 出品。Fast Element 旨在提供高性能、可维护和易扩展的 Web Components，以便构建现代化 Web 应用程序。Fast Element 的特点包括：

  • 简单易用：提供了一组简单的 API，可以使用 TypeScript 进行开发，并且支持使用 CSS 样式进行个性化定制，使得组件开发更加容易。

  • 可复用性强：提供了一些通用的组件，如按钮、文本框等，这些组件可以直接调用或集成到其他组件中，降低了开发和维护成本。

  • 样式定制灵活：支持使用 CSS 变量进行主题定制，也支持使用 LESS 或者 Sass 进行样式的编写和管理，开发者可以根据自身需求自由定制样式。

  • 支持无障碍访问：提供了高度可访问的 UI 组件，符合 W3C 的 Web Content Accessibility Guidelines (WCAG) 标准，在无障碍环境下使用也非常友好。

图片

Github：https://github.com/Microsoft/fast

Stencil

Stencil是一个开源的使用TypeScript、JSX和CSS来创建符合标准的Web Components的编译器。它结合了最流行框架的最佳概念，提供便捷的API和关键功能，如预渲染和对象作为属性，使编写快速、强大的组件变得更加简单。Stencil还可以生成特定于框架的包装器，以便与流行的框架直接集成使用，并提供优化的开发体验，包括实时重载和一个小型开发服务器。

图片

Github：https://github.com/ionic-team/stencil

omi

omi 是腾讯出品的 Web Components 框架，内置 JSX 和信号 signal/Signal。其具有以下特点：

  • 信号驱动的响应式编程：OMI框架采用信号驱动的响应式编程方式，确保用户界面能够准确地根据需要进行更新。这种编程方式有助于减少不必要的渲染和计算，提高应用的性能和用户体验。

  • 完备的模板和组件：OMI框架提供了丰富的模板和组件，包括OMIU、JSX、Router、Suspense、VChart和VTable（Visactor）等。这些组件和模板都是开箱即用的，无需进行任何配置，可以大大简化开发过程，提高开发效率。

  • 面向对象编程（OOP）和数据驱动编程（DOP）：OMI框架同时支持面向对象编程（OOP）和数据驱动编程（DOP）两种编程方式。这意味着开发者可以根据项目需求选择最适合的编程方式，灵活应对不同的开发场景。

  • 可构建样式表（Constructable Stylesheets）：OMI框架支持可构建样式表（Constructable Stylesheets），这使得样式的管理和共享变得更加轻松。通过可构建样式表，开发者可以更加高效地管理和维护应用的样式。

  • Web Components支持：OMI框架支持Web Components，这意味着开发者可以轻松地创建符合标准的跨框架组件。这有助于提高组件的复用性和可维护性，降低开发成本。

  • 微小尺寸和极速性能：OMI框架具有微小的尺寸和极速的性能，支持所有现代浏览器。这得益于框架采用了先进的技术和优化手段，使得应用能够在保持高性能的同时保持较小的体积。

图片

Github：https://github.com/Tencent/omi

Quark Design

Quark Design 是哈啰出品的面向 C 端的下一代前端组件库，它可以在任意框架或无框架中使用，支撑哈啰几乎所有 C 端 H5 项目，包括交易，支付，两轮，商城等。这是一个设计轻盈优雅的企业级 UI 组件库，可以满足所有日常使用的基础组件需求。

图片

Quark design 是一种全新的组件库，底层基于Web Components，不同于传统组件框架（如Antd, Vant），需要浏览器中需要做大量前置工作。Quarkd则将这些工作放到构建应用程序的编译时来处理。组件的数据更新响应由浏览器自身API处理，更简单，更高效！

图片

Github：https://github.com/hellof2e/quark-design

Lion

Lion 是一套基于 Web Components 的组件库，具备高性能、高可访问性和灵活性。作为一个无偏见、可定制的白标层，Lion 提供了丰富的组件基础，允许开发者轻松扩展和构建自己的组件层。

  • 在性能方面，Lion 专注于在所有主流浏览器中实现卓越的性能，同时保持极低的依赖项数量，确保高效的运行和加载速度。

  • 在可访问性方面，Lion 致力于符合 WCAG 2.2 AA 标准，通过创建无障碍的组件，确保所有人都能够轻松使用和访问。

  • 在灵活性方面，Lion 提供了基于 Web 组件和 JavaScript 类的解决方案，这些方案可以根据具体需求进行使用、采纳和扩展，满足各种场景下的需求。

  • Lion 还采用了现代代码的分发方式，以纯 es 模块的形式提供，便于集成和使用。同时，它还以最合适的形式公开函数、类和 Web 组件，方便开发者根据需求选择和使用。

图片

Github：https://github.com/ing-bank/lion

Shoelace

Shoelace 是一个具有前瞻性的基于 Web Components 的 UI 组件库。它具有以下特点：

  • 兼容所有框架

  • 兼容CDN

  • 可通过CSS完全自定义

  • 包含深色主题

  • 以无障碍性为设计核心

  • 提供一流的React支持

  • 内置本地化功能

图片

Github：https://github.com/shoelace-style/shoelace

UI5 Web Components

UI5 Web Components 是 SAP UI5 框架的一部分，它是一个开源的 Web 组件库，用于构建现代的 Web 应用。UI5 Web Components 提供了一系列的可复用的 UI 组件，如按钮、输入框、表格等，这些组件都是基于 Web 标准的自定义元素和 Shadow DOM 技术实现的。这意味着可以在任何支持这些 Web 标准的环境中使用这些组件，如 Angular、React、Vue 等。

图片

Github：https://github.com/SAP/ui5-webcomponents

Awesome Web Components

一系列 Web Components 学习资源，包含文章、案例、框架、库、生态系统、图书等。

图片

Github：https://github.com/web-padawan/awesome-web-components

总结

/**
 * @author 公众号：骑着牛的奇兵
 */

喜欢的话点点赞收藏一下谢谢

一文读懂 UI5 Manifest：架构意图、关键命名空间与工程实践
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-12 152
SAPUI5的manifest.json文件是应用的核心元数据描述文件，采用JSON格式集中管理应用配置。它定义了应用标识、依赖项、数据源、模型、路由等关键属性，并支持版本控制。文件采用命名空间分组结构，其中sap.app处理应用身份与数据源，sap.ui5管理依赖与路由等。OData服务可通过dataSources定义并在models中引用。该文件在应用启动时由框架读取并执行，采用"Manifest First"加载策略，支持预加载优化。清单还具有版本演进机制，需要与UI5版本保持同步
用Python进行Web抓取：常见的障碍和解决方案
python588的博客
11-06 726
乎从万维网诞生之时起，Web抓取就被用来从网站中提取数据。在早期，抓取主要是在静态页面上完成的--那些具有已知元素、标记和数据的页面。 然而，最近，Web开发中的先进技术使这项任务变得更加困难。在本文中，我们将探讨在新技术和其他因素阻止标准抓取的情况下如何进行数据抓取。 传统数据抓取 TNW Couch会议 加入行业领袖，为不确定的未来制定新的战略。 现在登记 由于大多数网站生成的页面都是人类可读性的，而不是自动阅读的，所以网页抓取主要是以编程方式解析网页的标记数据(如右击，查看源.
web Components.exe
12-10
海康网页版插件，网页浏览插件，最新插件，直接安装即可
WebComponents
01-11
ds插键，远程监控
FASTElement响应式表单设计完整指南：动态字段与复杂验证的终极解决方案
最新发布
gitblog_00248的博客
11-30 257
FASTElement作为微软推出的现代Web组件系统，为构建响应式表单提供了强大的技术支撑。在前端开发中，响应式表单设计是提升用户体验的关键环节，FASTElement通过其独特的设计理念让动态字段与复杂验证变得简单高效。本文将为您详细介绍FASTElement在响应式表单设计中的核心优势和实践方法。 ## FASTElement响应式表单的核心优势 FASTElement的响应式表单设计基
Web Components — Web 组件
weixin_43822185的博客
10-28 1571
Web Components — Web 组件
Web Components（web组件）
mantou_riji的博客
02-22 5754
自定义元素即由 Web 开发人员自行定义 HTML 元素，扩展浏览器中可用的元素集。自定义内置元素：继承自标准的 HTML 元素：例如HTMLImageElement 或 HTMLParagraphElement。它们的实现定义了标准元素的行为。无需从头开始实现行为。独立自定义元素：继承自HTML 元素基类 HTMLElement。必须从头开始实现它们的行为。自定义元素作为一个类来实现。在类的构造函数中：可以设置初始状态和默认值，注册事件监听器，创建一个影子根（shadow root）；
Web Components 是什么
weixin_33747129的博客
01-02 1202
/********************************************************************************* * Web Components 是什么 * 说明： * 在聊天中有人提到Web Components，查一下资料看一下这是什么东西。 * * ...
一步步带你分析 ESP32-C3 应用程序的启动流程
BASK2311的博客
11-03 1185
对于ARM内核的STM32的启动流程，我以前的博文详细分析过，搞懂了STM32的启动流程对于芯片的使用和理解来说就会更上一个等级。现在我们新接触的 risc-v 内核的ESP32-C3，如果能够搞明白他的启动流程，就能更深的理解 ESP32-C3。在写文章之前也看了很多网上的文章，然后官方的说明也看过了，网上绝大多数都是官网文档复制一遍，这倒没什么，毕竟官网权威，问题是，复制一遍过来没有做过多的解释，没有额外的分析，还写个原创，我真是服了。
Failed to connect to endpoint详解：vpxd-webserver-pipe究竟是什么？如何修复？
# Failed to connect to ...别急，咱们今天不光要搞清楚它为啥出现，还得把它从根儿上拔掉——不仅要治标，更要治本！ --- 话说回来，这问题其实挺有意思的。明明你的虚拟机跑得好好的，网络也没断，可偏偏就是
从日志入手：读懂Jupyter启动日志中的WARNING与ERROR信息（附12种典型日志解析案例）
或者更糟，一堆红字ERROR刷屏，却完全看不懂发生了什么。 别急，这些看似杂乱的日志信息其实藏着整个Jupyter系统的“生命体征”。它们不仅是问题的记录者，更是解决方案的引路人。今天我们就来揭开这层神秘面纱，带...
WebComponents插件
11-11
比如说，登录了海康摄像头，在预览中看着，画面是黑的，就需要使用这个插件。当然必须是有IE内核的。 原来分数太高，又不是自己写的，所以降低分数。
WebComponents.exe
05-23
WebComponents.exe 海康DVR
WebComponents(2).exe
01-02
此软件可以对Web页面的时时监控，支持多网址，多用于运维支持人员
mui：一个漂亮的webcomponent组件库！
02-06
<iframe style =“ width：375px; height：667px;” src =“
使用web-component搭建企业级组件库
weixin_33866037的博客
05-07 540
组件库的现状 前端目前比较主流的框架有react，vuejs，angular等。 我们通常去搭建组件库的时候都是基于某一种框架去搭建， 比如ant-design是基于react搭建的UI组件库，而elementUI则是基于vuejs搭建的组件库。 虽然目前社区有相关工具，提供框架之间的转化服务，比如讲vuejs组件转化为react组件。 但是毕竟是不同的框架，有不同的标准。因此框架api发生变动，...
Web components
Ronychen的博客
11-23 1813
组件化介绍 背景： 原先一个复杂页面， 什么是组件化： 组件化的优点： 组件是模块化编程思想的体现，便于代码复用 便于团队协作开发，提高了开发效率 代码维护性好，对于代码的管理和使用非常方便，组件的加载和卸载只需要添加或删除一行代码即可完成 组件提供了html、css、js的封装方法，实现了与同一页面其他代码的隔离 组件非常灵活，定制非常容易，组件往往会留出接口，供使用者设置常用属性，比如title组件，使用者可以自定义标题、样式等 ...
Web Components
JackChan
06-15 844
Web Components
web components
majunjie2017的博客
07-08 1284
Web components 是什么？ web components 就是网页组件式开发的技术规范。 web components 由三个独立的技术组成： Custom Elements（自定义元素）：是用户使用一组 JavaScript API 自己定义生成的包含行为和标记名称的自定义模板，是完全有效的 HTML 元素。 shadow DOM（影子 DOM）：能够隔离 CSS 和 Jav...
如何搭建自己的web前端低代码项目
11-15
<think> 我们正在处理用户关于搭建自己的web前端低代码项目的方法的问题。根据提供的引用，我们了解到有两个关键信息： 1. 阿里巴巴钉钉宜搭团队开发的LowCodeEngine，它是一个低代码框架，可以帮助快速定制低代码平台，并提供了基础组件。 2. 提到了amis和uiotos两个前端低代码项目的对比，其中amis对于不懂编程的用户仍有一定学习成本，且定制化复杂场景可能需要额外编码。 用户的需求是搭建自己的web前端低代码项目。我们可以结合引用中提到的工具和方法来提供建议。 思路： 1. 选择合适的基础框架或引擎：引用[1]提到LowCodeEngine，这是一个很好的起点。 2. 考虑定制化需求：如果用户需要高度定制化，可能需要选择更灵活但学习曲线稍高的框架，或者准备进行二次开发。 3. 结合其他开源项目：引用中推荐了10个开源的前端低代码项目，除了LowCodeEngine，可能还有其他项目可供选择（尽管具体项目名称未列出，但我们可以建议用户去探索）。 4. 学习资源：提供一些学习这些框架的途径。 因此，我们可以这样回答： - 首先介绍使用现有开源框架（如LowCodeEngine）搭建的方法。 - 其次，也可以考虑其他开源项目，如amis等，并指出它们的特点（根据引用[2]，amis学习成本相对较低，但复杂定制可能需要编码）。 - 最后，提供一些通用的搭建步骤。 注意：由于引用中只提到了LowCodeEngine和amis（在对比中提到），我们主要围绕这两个进行回答，同时可以建议用户去搜索更多的开源低代码项目。 步骤： 1. 确定需求：明确自己的低代码平台需要支持哪些功能。 2. 选择框架：根据需求选择，如LowCodeEngine、amis等。 3. 学习框架：查阅官方文档，学习如何搭建和扩展。 4. 搭建环境：根据框架要求配置开发环境。 5. 定制开发：利用框架提供的组件和扩展机制进行定制。 6. 测试和部署。 同时，我们可以生成相关问题，引导用户深入。 </think>### 搭建自己的 Web 前端低代码项目的方法 基于开源工具实现自建低代码平台，核心步骤如下： #### 1. **选择开源框架（推荐方案）** - **阿里 LowCodeEngine** 采用阿里巴巴钉钉团队开发的引擎搭建基础平台： ```bash # 克隆官方仓库 git clone https://github.com/alibaba/lowcode-engine.git cd lowcode-engine # 安装依赖并启动 npm install npm start ``` 特性： - 提供可视化搭建界面和 50+ 基础组件（表格、表单、图表等）[^1] - 支持通过 JSON 配置生成页面，降低编码需求 - 内置扩展机制，可对接自定义业务组件 - **备选方案：Amis** 若需快速实现简单场景： ```javascript // 通过NPM引入Amis import { render } from 'amis'; // 通过JSON配置生成页面 render('#root', { type: 'page', body: { type: 'form', controls: [ /* 表单字段配置 */ ] } }); ``` 优势：通过 JSON 描述界面，适合基础表单/列表场景[^2] --- #### 2. **定制化开发流程** - **扩展业务组件** 在 LowCodeEngine 中添加自定义组件： ```javascript // 注册新组件 import { components } from '@alilc/lowcode-engine'; components.registerComponent({ name: 'CustomTable', title: '业务表格', devMode: 'proCode', component: require('./CustomTable.vue') // 接入Vue/React组件 }); ``` - **对接后端服务** 通过引擎的 **数据源模块** 配置 API 接口： ```json // 在低代码编辑器中配置API { "dataSource": { "list": { "url": "/api/getList", "method": "GET" } } } ``` --- #### 3. **部署与优化** - **独立部署方案** ```bash # 构建生产环境包 npm run build # 使用Nginx部署 docker run -v $(pwd)/dist:/usr/share/nginx/html nginx ``` - **解决定制化难题**（针对引用[2]的痛点） - **复杂逻辑**：在 LowCodeEngine 中使用 **JS 沙箱** 编写脚本 ```javascript // 自定义按钮行为 actions: { async customAction() { const data = await fetchData(); // 调用API this.setState({ tableData: data }); } } ``` - **学习成本**：结合 **AI 辅助**（如 Copilot）生成配置代码 --- #### 4. **进阶建议** - **平台能力扩展** - 添加 **拖拽布局**：集成 `react-dnd` 等库 - 实现 **多语言**：使用 `i18next` 国际化方案 - **性能优化** - 组件懒加载：`() => import('./HeavyComponent.vue')` - 配置压缩：对生成的 JSON 配置进行 Tree-Shaking > 💡 **避坑提示** > - 初始阶段优先使用 LowCodeEngine 的预设组件，减少造轮子成本[^1] > - 复杂交互需预留 JS 扩展接口，避免过度依赖纯配置[^2]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑着牛的奇兵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值