共计 3033 个字符，预计需要花费 8 分钟才能阅读完成。
什么是组件化
广义的组件化个别是指标签化，也就是以自定义标签为外围的机制。
狭义的组件化包含对数据逻辑层业务梳理，造成不同层级的能力封装
在前端技术的倒退潮流下，可大抵分为三个阶段：
- web1.0
1.0 阶段，技术实现次要以原生 html、css、javascript。前端工程师概念粘稠，编程思维次要是以函数为单位拆散行为，每个函数做一件事
- web2.0
到了 2.0 时代，jQuery、Bootstrap 等模板引擎库开始呈现。编程上呈现了模块化标准，以模块为单位，每个模块做一件事
- web3.0（此 web3.0 非彼 web3.0）
3.0 阶段是前端技术最沉闷的期间，angular、react、vue 相继退场。用户对产品的体验越来越高，我的项目上的业务、交互越来越简单，技术上前后端开始拆散。编程思维开始以组件为单位，每个组件领有独立的构造、视图和行为，代表一个残缺的个体
在这个期间，对于组件化的开发模式愈演愈烈，各个框架和库都有本人的规范，这对于我的项目间的兼容并不敌对。于是，W3C 晚期提出的 Web Components 概念逐步受到关注。
Web Components
Web Components 是 W3C 定义的规范，是一套原生的组件化开发技术，它容许你创立可重用的定制元素并在 web 利用中应用它们。
应用 Web Components 不须要借助任何第三方框架或库，可用于开发跨端、跨框架的组件库
应用 Web Components
自定义元素
Web Components 规范反对开发者可能将 HTML 页面的性能封装为自定义元素
注册自定义元素须要调用 CustomElementRegistry.define() 办法，CustomElementRegistry是一个接口，个别应用它的实现类customElements。
define 办法有三个参数：
- 自定义标签名（须要复合 DOMString 规范，不能是单个单词，且其中必须要有短横线。）
- 封装元素行为逻辑的 类
- 蕴含 extends 属性的配置对象（是一个可选参数，extends 属性示意自定义元素继承自哪个元素）
例如：
// 自定义一个继承自 p 元素的标签名为 my-element 的元素
customElements.define('my-element', MyElement, { extends: 'p'});对于封装元素行为逻辑的类，咱们须要申明一个 class 继承自 HTMLElement。在构造函数中必须先调用super() 函数，之后再编写自定义元素的行为逻辑，具体如何封装会在下一节 shadowDOM 中介绍。
Web Components 依据配置对象的传与否，自定义元素可分为继承自根本的 HTML 元素、独立的元素。
在组件类中能够定义以下四种 生命周期 回调函数的行为：
- connectedCallback：元素首次被插入文档 DOM 时调用。
- disconnectedCallback：元素从文档 DOM 中删除时调用。
- adoptedCallback：元素被挪动到新的文档时调用。
- attributeChangedCallback: 元素减少、删除、批改本身属性时调用，它承受三个参数（属性名、旧值、新值）。
Shadow DOM
Shadow DOM 是封装自定义元素的要害。Shadow DOM 就像一个独立的大沙箱，它可能人造做到 CSS 的款式隔离，与其它的 DOM 元素互不烦扰，它的外部蕴含一个 Shadow 树。和其余的根本 HTML 元素一样，Shadow DOM 也是一个附着在 DOM 树上的节点，这个节点叫作 shadow host，通过 shadowRoot 对象拜访该节点。上面是对于 Shadow DOM 的示意图：
通过调用 Element.attachShadow()办法来创立一个 Shadow DOM 并附着到自定义元素上，它返回一个 shadowRoot 对象，咱们所封装的自定义元素其实是封装在 ShadowDOM 里。attachShadow()办法承受一个蕴含 mode 属性 的配置对象作为参数，mode 能够是 open 或者 closed，代表是否容许 JavaScript 操作这个节点。上面，咱们申明一个自定义元素类：
class MyElement extends HTMLElement {constructor() {// 首先调用 super()
super();
const shadowRoot = this.attachShadow({mode= 'open'});
// 接下来，咱们能够为 shadowRoot 增加各种咱们想要的货色
}
}之后能够通过 dom 操作为 shadowRoot 增加节点（包含 style、link 标签），这样就能够实现一个封装组件了。
模板内容
在自定义元素的代码中，咱们将 html 定义在字符串中，这不利于继续的保护。HTML5 新增了 template 标签为 Web Components 的模板开发提供了便当。该标签内定义的内容浏览器并不会渲染，但能够通过 dom 获取。
咱们在页面上定义一个 template 标签，并放一个段落文字，这个标签并不会在页面上渲染
<template id="my-paragraph">
<p>My paragraph</p>
</template>在自定义元素中应用：
customElements.define('my-element',
class extends HTMLElement {constructor() {super();
const content = document.getElementById('my-paragraph').content;
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.append(content)
}
})插槽
有时候咱们心愿用户可能定义局部模板的内容，让组件模板变得更加灵便。
Web Components 提供了 slot 元素，是 web 组件内的一个占位符（称作“插槽 ”）。插槽由其 name 属性标识，并且容许您在模板中定义占位符，当在标记中应用该元素时，该占位符能够填充所需的任何 HTML 标记片段。咱们把template 标签里的内容改一下
<p><slot name="my-text">My default text</slot></p>在注册自定义组件后，能够这么应用：
<my-element>
<span slot="my-text">Let's have some different text!</span>
</my-element>通过设置 slot 属性，向组件模板插入自定义内容
到此，就是 Web Components 技术套的全部内容了。
最初
Web Components 并不是最近才呈现的，早在 2011 年 Google 就推出了 Web Components 的概念，不过也仅仅只是提出了这样一个概念，并没有去实现它。随着前端技术的倒退，Web Components 规范也逐步欠缺，尽管存在许多有余，然而起初呈现的的 React、Vue、Angular 等前端框架都受到了 Web Components 的启发。
Web Components 是一套原生的开发技术，可能实现跨端、跨框架、微服务的组件化开发，不受环境、框架技术的限度。目前很多大厂对这套技术进行了实际，市面上也呈现了很多 Web Components 库。例如：
- omi
- lit-element
- Polymer
- X-Tag
尽管如此，Web Components 仍然备受争议，想让便当原生的组件化开发，还须要大量的实际与优化。