Web Components 系列（一） —— 概述

前言

如果我们选择不使用任何框架的情况下来进行前端开发，那么针对一个完整的网页，我们需要开发以下代码：

• 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 的出现可以说是前端技术发展的必然结果，而我们需要做的就是想办法善用它为自己服务。

~

~ 本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！