Web Components 业务组件库开发

一、回顾 Web Components

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

1. 核心 API 回顾

Web Components 由 3 个核心 API 组成:

Custom elements(自定义元素):用来让我们定义自定义元素及其行为,对外提供组件的标签;
Shadow DOM(影子 DOM):用来封装组件内部的结构,避免与外部冲突;
HTML templates(HTML 模版):包括