共计 1791 个字符，预计需要花费 5 分钟才能阅读完成。
前言
通过本文，您将理解什么是 Web components，以及如何将其落地到业务场景的最佳实际。
一、初识（什么是 Web components）
在 html5 提供的 video 组件实现上采纳了 Shadow DOM 技术，Shadow DOM 技术是 Web Components 外围套件之一，还有像 input、select 也都采纳了这个技术，具体什么是 Shadow DOM 会在下文中给出解释。
二、实际
基于业务，咱们先看一个订单卡片的视觉稿：
用 Web Components 实现，代码展现如下：
这里波及到 Web Components 的三大技术套件
- Template: 利用 Template 生成 DOM；
- Shadow DOM：利用 Shadow DOM 来隔离 CSS 款式；
- Custom Elements: 利用 Custom Elements 来自定义元素，继承自 HTMLElement，HTMLElement 是 DOM API 外面的一个类，继承该类就有了 html 的常见属性和 API，利用 Custom Elements 来自定义元素；
Template 和 Custom Elements 都比拟好了解，那什么是 Shadow DOM 呢？
你能够简略了解为 Shadow DOM 是一个独立的沙箱，与其它的 DOM 元素互不烦扰，能人造做到 CSS 的款式隔离！相似于 Vue 中带 Scoped 的 style 标签，它不会烦扰其它标签款式。
上面咱们来看下更具象的 <order-card /> 组件代码：
目前组件的内容是写死的，该怎么动静生成 DOM 呢？咱们持续往下看：
答案就是借助 Web Components 组件的生命周期来做，其中 connectedCallback 就是 dom 节点首次挂载调用，且只会调用一次，在这里能够拿到内部传入的属性。属性变更会调用 attributeChangedCallback, 在这里能够做 dom 更新相干的事件，这里不在开展，大家能够自行摸索下。
dom 能动静生成了，点击事件怎么玩？
其实和大家平时写 Vue 组件、React 组件一样，在 Vue 中是 @click，在 React 中是 onClick，具体示例可参考下图：
好了，根本知识点先讲到这里。这就是 Web Components！
三、总结
Web Components 具备如下特点：
其利用场景也比拟丰盛：
组件库
举例：国内已有实际 WCs 的是 Taro v3 版本，上面是官网截图：
跨端
举例：跨端的含意是一套 Web Components 组件既能够跑在 Web 上也能够跑在小程序上，跑在 Web 上，那是 Web Components 人造反对的，跑在小程序上的一个可行的计划能够参考下 Taro 3.x。
其基本原理是在 Taro runtime 提供了一套模仿 DOM & BOM 的 API，React & Vue 最终调用的 API 会被映射到 taro runtime 模仿的那一套 API，而后 Taro runtime 在模仿的 API 外部做微信小程序相干组件和 API 的调用。目前国内腾讯开源的 omi-mp 就实现跨端，感兴趣的能够看一下。
微前端
微前端的几个基本要素：技术栈无关、利用隔离、独立开发。目前 Web Components 都合乎，因而实践上用 Web Components 做微前端也是可行的。
四、做点什么
既然咱们晓得了 WCs 这么牛逼，那咱们能用它来为咱们业务做点什么呢？
🍉🍉🍉 小故事一则：
在 9 月初，咱们业务中台前端团队在和数科团队共建 Vue 组件库，过后正好咱们的产品经理提出要重构订单，会波及到 React、Vue 两个技术栈的多个工程。
因而咱们萌发了寻找一套可能跨技术栈的组件解决方案，在 9 月份的时候，咱们组一边在和数科共建 Vue 2.x 组件库、一边在摸索跨技术组件的可能性。
在通过一直摸索后，咱们利用业务开发 Buffer 工夫，积淀了一套基于 Web Components 技术的跨技术栈组件库！
上面向大家隆重介绍，咱们的作品 Quark：官网请点击
用数据谈话，下图是 Quark 在业务的落地状况，目前为止，Quark 曾经能够接受住 40w+ pv 工程，且监控数据表明运行状况良好。
- 【体积小】比轻更轻，Quark cdn 总包大小为 20k！
- 【跨技术栈】反对 Vue、React、Angular 等各类框架 / 无框架
- 【品质高】19+ 高质量组件
- 【按需加载】反对按需援用
- 【文档全】详尽的文档和示例
- 【单测】单元测试笼罩
- 【TS】反对 TypeScript
- 【SSR】反对服务端渲染
- 【主题】反对定制主题
打勾局部文章已发内网论坛！
以上。
