七年之痒后，Web Component真的兑现了"一次编写，随处运行"的诺言吗？
当React、Vue等框架掀起组件化革命时， 原生Web Components 标准曾被视为前端组件的未来。2017年规范正式落地，开发者们欢呼着"告别框架锁定的时代即将到来"。然而七年过去，这个曾被寄予厚望的技术，究竟孕育出了哪些真正令人惊艳的组件？
下面这些是我个人在互联网漫游、开发中遇到或者使用到的一些Web Component组件，也有些是觉得挺有意思收藏的，今天和大家一起盘点盘点～
欢迎大家评论区分享那些让你 拍案叫绝的Web Components组件 ～
1、<hex-color-picker>
颜色选择器组件
demo地址：iamkulykov.com/vanilla-col…
2、<browser-window>
类似 Safari 的 Web 浏览器窗口组件
demo地址：zachleat.github.io/browser-win…
3、<image-compare>
滑块比较两幅图像组件
demo地址：image-compare-component.netlify.app/#usage
4、 <two-up>
滑块比较左右两边组件
demo地址：codepen.io/developit/p…
5、<emoji-picker>
表情选择器组件
demo地址：nolanlawson.github.io/emoji-picke…
6、<json-viewer>
JSON数据查看组件
demo地址：alenaksu.github.io/json-viewer
7、<swiper-container>
swiper.js的web component版组件
文档地址：swiperjs.com/element
8、 <md-block>
MarkDown语法文本渲染组件
demo地址：md-block.verou.me/
9、 <zero-md>
加载和显示外部 MarkDown文件渲染组件
<zero-md src="<https://example.com/markdown.md>"></zero-md>
文档地址：zerodevx.github.io/zero-md/#us…
10、<code-block>
带有语法高亮和复制按钮的代码块组件
demo地址：heppokofrontend.github.io/html-code-b…
11、<trix-editor> <trix-toolbar>
Web 应用程序中撰写格式精美的文本组件
demo地址：trix-editor.org/
12、<math-field>
用于数学输入的 Web 组件
demo地址：cortexjs.io/mathfield/
最后
当需要实现某种效果时，你只需直接取用即可。这消除了重复造轮子的必要。无论你使用何种框架或技术栈都无关紧要，因为这些组件本身就是Web原生的组成部分。它们在API复杂度、渐进增强友好性、降级处理方式以及资源消耗等方面各有不同。
