谈谈WebComponents | 前端开发

一、 源起

让我们以一个例子开始。

假设我们要做一个环形进度条，它可以：

1、根据进度数值的不同，计算出百分比，以渲染对应的角度值。

2、根据设置的进度不同，我们用不同的颜色加以区分。

3、在环的中间我们以动画递增的方式显示进度。

最终的效果，大致如下图：

除了直接用组件库，聪明的你肯定已经想到了多种解决办法。如使用现代前端框架React/Vue/Angular/SvelteJS/SolidJS等等，你可能会找到或编写对应的组件，通过相应数据状态的变更，完成相对复杂的交互；又如在小快灵的项目下，用jQuery的Widget开发也是一个不错的选择；再或者，你可以点开你的HTML+JavaScript+CSS技能树，纯手工打造一个。这都是可以完成的任务。

这里^[1]就是一个针对这个需求的实现。

当然，在完成之后，你可能会考虑对组件做一些提炼，下次再遇到同样的需求，你就可以气定神闲地“开箱即用”。通常，我们希望撰写的代码能够实现在UI以及行为层面的复用。所以，以组件为单位进行代码复用的需求也就呼之欲出。

实际上，除了Web前端外，各种相关的界面技术，比如安卓和苹果App、Windows软件、Qt以及Flutter等等，都发展出了类似的组件化技术。可以说，组件化是界面技术发展到一定复杂程度的必然产物。

为了放心地复用组件，除了代码层面的复用方案，也要包含一定的隔离特性：我们希望元素的样式、行为能够不被其他的代码干扰，也不会干扰到页面其他的元素，即存在一定的隔离性。考虑下面的代码：

考虑上述第10行到20行，以及21行到29行分别来自不同的组件。这里第二个组件的加入就会影响第一个组件的行为。第一个组件也在完全不知情的情况下被莫名其妙地变更了行为、样式。

当然，这样的代码是精心简化过的，实际上的工程代码不会这样撰写。但复杂的代码会造成问题被隐藏的更深，更加难以发现。我们当然可以直接诘问开发者的虑事不周，不过更理智的做法是提炼一些工程化的方法来避免这种问题的发生。比如Vue框架中的scoped样式。归根到底的问题在于，早期的HTML、CSS缺乏封装所必须的特性。

为了弥补这一缺陷，技术人员做了各种探索。

“上古时期”，微软在IE系列曾实现过一种名曰“HTC”的技术，我们甚至还能从互联网上找到这个技术的蛛丝马迹^[2]。它实现了组件模版、样式、行为的复用和隔离方案。然而这项技术是IE Only的技术，后面随着大厂博弈以及各种标准化方案的诞生，这个方案在IE10以后便逐渐退出历史舞台。

Firefox在2007年左右也曾经支持过一个封装方案，叫XML Binding Language^[3]。不过这项技术也由于主要在Firefox支持，也已经逐步淡出。

前端的框架如Angular、React、Vue等等，都提供了组件的复用和行为隔离的方案。不过由于浏览器层面对于前端框架的语法不支持，一般会需要在部署在生产环境前作一定的前端编译，这也是目前前端开发的标准做法。

针对这些需求，W3C标准化项目组，在2011年前后提出了WebComponents标准，现在由WhatWG进行维护。Web Components最终试图HTML、CSS和DOM API层面配合浏览器试图解决这些问题，是一种新的浏览器特性，同时也是一个复合的标准，提供