web components 前端组件化趋势？

前言

在前端快速发展的今天，组件贯彻着我们日常开发的方方面面，不管是针对业务封装的业务组件，还是项目中依赖的第三方基础 UI 组件（Ant Design、Element），亦或是依赖的前端框架（Angular、Vue、React），它们都贯彻着「组件化」的概念，而这一切「组件化」都是「高内聚、低耦合」思想下的产物。

「组件化」开发已然成为前端主流开发方式，因为「组件化」开发在代码复用、提升团队效率方面有着无可比拟的优势，现在流行的 Vue、React、Angular 等等框架都是组件框架。所以毫不夸张的说 「组件化将会是前端的发展方向」。

目前存在问题

作者所在的部门一半的项目用的 Vue 技术栈，一半的项目用的 React 技术栈，遵循「高内聚、低耦合」的原则，我们为这两套技术栈分别搭建了Vue UI 组件库和React UI 组件库。这两套 UI 组件库的功能几乎毫无差异，但是要由两个团队来维护。适配这两个框架，将要耗费双倍的人力成本。

即使针对同一个技术栈，在面临版本升级时，旧的组件库也会存在不可用的情况。比如：Vue 从 2.x 升级到 3.x 版本，React从 17版本升级到 18 版本， 之前封装的基础组件和业务组件都在新版本中就不能正常使用。一套组件库在同一个框架不同版本之间存在差异，甚至只能固定在某一个版本中使用，这本身于前端的「组件化」趋势是相违背的。

随着前端复杂度的增加，项目中使用的框架越来越多，会在不经意间出现样式的冲突。很多框架在组件设计时没有样式进行样式隔，例如：在使用 React 时，React 在书写组件样式时经常出现样式覆盖、错乱的问题，不得不借助其他方案来解决此类问题。

Webpack 盛行的今天，大多数项目使用 Webpack 作为编译工具，这让组件经过 Webpack 编译之后想要在运行时即引即用变得不太现实。

前端框架的「组件化」并不是真正的「组件化」。虽然书写代码时的确是「组件化」的方法在写，但是编译完之后就不再「组件化」了。

「组件化」给前端的开发带来了极大的效率提升，随着发展前端「组件化」的框架也因此层出不穷，从最早的 jQuery，再到 React、Vue、Angular、Ratchet、Ionic 等等，几乎每年都有很多新的框架如雨后春笋悄然而生，它们或借鉴或颠覆其他已存在的框架，究其本质这些框架的很大一部分模块在功能上是重合的，但也仅仅在功能层面重合，代码层面确完全不兼容。

为了解决这些问题，各种解决方案层出不穷，其中

Web Components

就是其中关键的一环。

什么是web components?

Web Components 也是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装的HTML 标记，使用时不用加载任何额外的模块。自定义组件和小部件基于 Web Components 标准构建，可跨现代浏览器工作，并可与任何支持 HTML 的 JavaScript 库或框架一起使用。

web components的历史：

实际上：Vue 作者在创建 Vue 的时候大量参考了 Web Components 的语法。

web components的组成：

Custom element（自定义元素）：一组 JavaScript API，允许你定义 custom elements 及其行为，然后可以在你的用户界面中按照需要使用它们。

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

HTML template（HTML 模板）： [` 和 `` 元素使你可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

web components的使用

<!-- 自定义组件的使用 --><my-button as-atom></my-button><template id="my-button-template"><button class="my-button">click</button><style>.my-button {padding: 10px 20px;
                font-size: 16px;
                border-radius: 12px;
                background-color:rgb(35,64,121);color: white;border: none;}</style></template><script>classMyButtonextendsHTMLElement{constructor(){super();const shadow =this.attachShadow({mode:'closed'});const templateElem = document.getElementById('my-button-template');const content = templateElem.content.cloneNode(true);

                shadow.appendChild(content);/* 添加点击事件 */this.$button = shadow.querySelector('button');this.$button.addEventListener('click',()=>{this.dispatchEvent(newCustomEvent('myClick',{detail:'hello'}))});}// 类似mountedconnectedCallback(){if(this.hasAttribute('as-atom')){this.$button.style.padding ='0';}}getlabel(){returnthis.getAttribute('label');}setlabel(value){this.setAttribute('label', value);}staticgetobservedAttributes(){return['label'];}attributeChangedCallback(name, oldVal, newVal){this.render();}render(){this.$button.innerHTML =this.label;}}
        window.customElements.define('my-button', MyButton);</script></body>

成熟的组件库

• hybrids： 是一个 JavaScript UI 框架，用于创建功能齐全的 Web 应用程序、组件库或具有独特的混合声明性和功能性架构的单个 Web Components。
• Polymer ：是 Google 推出的 Web Components 库，支持数据的单向和双向绑定，兼容性较好，跨浏览器性能也较好；提供了一组用于创建 custom elements 的功能。这些功能旨在使 custom elements 像标准 DOM 元素一样工作更容易和更快。