共计 1213 个字符，预计需要花费 4 分钟才能阅读完成。
前言
如果咱们抉择不应用任何框架的状况下来进行前端开发，那么针对一个残缺的网页，咱们须要开发以下代码：
- HTML 代码
- CSS 代码
- JavaScript 代码
就几年之前来说，HTML 局部的代码根本不存在复用的可能，这就导致咱们可能须要开发大量反复的 HTML 代码，即便应用 CV 法，代码的冗余却是不可避免的。
Web Components 诞生的背景
近几年，咱们在应用前端框架（比方 Vue）时，都晓得有个“组件”的概念，通过应用组件能够进步代码复用率，一次创立多处应用，在肯定水平上简化了开发流程。
既然组件化开发这么风行，又能给开发带来极大的便当，那么浏览器就当然有理由来原生反对组件化，Web Components 就应运而生，它的诞生使得浏览器有了原生反对组件化的能力。
Web Components 的概念
何为 Web Components？顾名思义，就是“网页组件”，援用 MDN 上的话来说就是：
Web Components 是一套不同的技术，容许您创立可重用的定制元素（它们的性能封装在您的代码之外）并且在您的 web 利用中应用它们。
留神其中的关键词：可重用、定制，这也是咱们乐于应用第三方框架中组件性能的理由。
Web Components 的组成
Web Components 不是繁多的标准，而是一系列的技术组成，包含 Custom Element、Shadow DOM、HTML templates 三种技术规范。它们能够一起应用来创立封装性能的定制元素，能够在你喜爱的任何中央重用，不用放心代码抵触。
Custom elements（自定义元素）
一组 JavaScript API，容许您定义 custom elements 及其行为，而后能够在您的用户界面中依照须要应用它们。
Shadow DOM（影子 DOM）
一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 离开出现）并管制其关联的性能。通过这种形式，您能够放弃元素的性能公有，这样它们就能够被脚本化和款式化，而不必放心与文档的其余局部发生冲突。
HTML templates（HTML 模板）
<templete> 和 <slot> 元素使您能够编写不在出现页面中显示的标记模板。而后它们能够作为自定义元素构造的根底被屡次重用。
Web Components 的兼容性
兼容性是测验一项技术是否用于生产环境的规范，咱们来看一下 Web Components 各项技术的兼容性：
通过上图能够看到，Web Components 在支流浏览器上的反对曾经极其良好，如果对向下兼容要求不严格的话，齐全能够在生产环境中应用了。
总结
技术的倒退总是以“提供便当”为方向的，Web Components 的呈现能够说是前端技术倒退的必然结果，而咱们须要做的就是想方法善用它为本人服务。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
