如何从零开始学习开发 Web Components 业务组件库？

本文共计2693个文字，预计阅读时间需要11分钟。

组件化是前端开发的一个重要趋势，它一方面提高了开发效率，另一方面降低了维护成本。主流的框架如Vue.js、React，以及衍生出的Ant Design、uniapp、Taro等，都是组件化框架的典型代表。Web Components则是一组Web标准，旨在提供一种创建自定义原生态组件的方法。

组件化是前端发展的一个重要方向，它一方面提高开发效率，另一方面降低维护成本。主流的 Vue.js、React 及其延伸的 Ant Design、uniapp、Taro 等都是组件框架。Web Components 是一组 Web 原生 API 的总称，允许我们创建可重用的自定义组件，并在我们 Web 应用中像使用原生 HTML 标签一样使用。目前已经很多前端框架/库支持 Web Components。

本文将带大家回顾 Web Components 核心 API，并从 0 到 1 实现一个基于 Web Components API 开发的业务组件库。

最终效果：blog.pingan8787.com/exe-components/demo.html仓库地址：github.com/pingan8787/Learn-Web-Components

一、回顾 Web Components

在前端发展历史中，从刚开始重复业务到处复制相同代码，到 Web Components 的出现，我们使用原生 HTML 标签的自定义组件，复用组件代码，提高开发效率。通过 Web Components 创建的组件，几乎可以使用在任何前端框架中。