Web Components我觉得这些真不错！

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

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

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

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

1、<hex-color-picker>

颜色选择器组件

源码地址：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文件渲染组件

<zero-md src="https://example.com/markdown.md"></zero-md>

文档地址：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