1. 前言


组件化这个词 应该大家耳朵都听起茧巴了在 Vue React Angular 三个大佬 的带领下 , 我们前端 是否终于告别了 粘贴复制的 “组件化” 时代

Antd ElementUi 这些高质量 且开箱即用 的 ui 库更是让组件化开发更上一层楼。如果不编译 或者 原生可以实现所谓的组件化吗?w3c 给了我们 web component 的解决方案

2. 什么是 Web Component


mdn 文档

作为开发者,我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的 HTML(以及相关的样式和脚本),有时您不得不写代码来呈现自定义 UI 控件,并且如果您不小心的话,多次使用它们会使您的页面变得一团糟。

Web Components 旨在解决这些问题 — 它由四项主要技术组成,它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。

核心的四大要素

  • Custom elements(自定义元素):一组 JavaScript API,允许您定义 custom elements 及其行为,然后可以在您的用户界面中按照需要使用它们。

  • Shadow DOM(影子 DOM):一组 JavaScript API,用于将封装的“影子”DOM 树附加到元素(与主文档 DOM 分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。

  • HTML templates(HTML 模板)`: