有没有用 Web Component 开发的前端框架？

七年之痒后，Web Component真的兑现了"一次编写，随处运行"的诺言吗？

当React、Vue等框架掀起组件化革命时， 原生Web Components 标准曾被视为前端组件的未来。2017年规范正式落地，开发者们欢呼着"告别框架锁定的时代即将到来"。然而七年过去，这个曾被寄予厚望的技术，究竟孕育出了哪些真正令人惊艳的组件？

下面这些是我个人在互联网漫游、开发中遇到或者使用到的一些Web Component组件，也有些是觉得挺有意思收藏的，今天和大家一起盘点盘点～

欢迎大家评论区分享那些让你 拍案叫绝的Web Components组件 ～

1、<hex-color-picker>

颜色选择器组件

https://cdn.jsdelivr.net/gh/haolian93/picbed/readme/20250228105741.png

源码地址：https://github.com/web-padawan/vanilla-colorful

demo地址：https://iamkulykov.com/vanilla-colorful/

2、<browser-window>

类似 Safari 的 Web 浏览器窗口组件

源码地址：https://github.com/zachleat/browser-window

demo地址：https://zachleat.github.io/browser-window/demo.html

3、<image-compare>

滑块比较两幅图像组件

源码地址：https://github.com/cloudfour/image-compare

demo地址：https://image-compare-component.netlify.app/#usage

4、<two-up>

滑块比较左右两边组件

源码地址：https://codepen.io/developit/pen/qBdbNLK

demo地址：https://codepen.io/developit/pen/qBdbNLK

5、<emoji-picker>

表情选择器组件

源码地址：https://github.com/nolanlawson/emoji-picker-element

demo地址：https://nolanlawson.github.io/emoji-picker-element/

6、<json-viewer>

JSON数据查看组件

源码地址：https://github.com/alenaksu/json-viewer

demo地址：https://alenaksu.github.io/json-viewer

7、<swiper-container>

swiper.js的web component版组件

文档地址：https://swiperjs.com/element

8、<md-block>

MarkDown语法文本渲染组件

源码地址：https://github.com/leaverou/md-block

demo地址：https://md-block.verou.me/

9、<zero-md>

加载和显示外部 MarkDown文件渲染组件

文档地址：https://zerodevx.github.io/zero-md/#usage

10、<code-block>

带有语法高亮和复制按钮的代码块组件

源码地址：https://github.com/heppokofrontend/html-code-block-element

demo地址：https://heppokofrontend.github.io/html-code-block-element/

11、<trix-editor>\<trix-toolbar>

Web 应用程序中撰写格式精美的文本组件

源码地址：https://github.com/basecamp/trix

demo地址：https://trix-editor.org/

12、<math-field>

用于数学输入的 Web 组件

源码地址：https://github.com/arnog/mathlive?tab=readme-ov-file

demo地址：https://cortexjs.io/mathfield/

最后

当需要实现某种效果时，你只需直接取用即可。这消除了重复造轮子的必要。无论你使用何种框架或技术栈都无关紧要，因为这些组件本身就是Web原生的组成部分。它们在API复杂度、渐进增强友好性、降级处理方式以及资源消耗等方面各有不同。

其他Web Component组件集合地址

• https://webcomponents.today/standalone-elements/
• https://github.com/davatron5000/awesome-standalones