共计 1734 个字符，预计需要花费 5 分钟才能阅读完成。
初识
在 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 的调用。
微前端
微前端的几个基本要素：技术栈无关、利用隔离、独立开发。目前 Web Components 都合乎，实践上用 Web Components 做微前端也是可行的。
做点什么
既然咱们晓得了 WCs 这么牛逼，那咱们能用它来为咱们业务做点什么呢？
🍉🍉🍉 小故事一则：
在 9 月初，咱们团队在和其余团队共建 Vue 组件库，过后正好咱们的产品经理提出要重构订单，会波及到 React、Vue 两个技术栈的多个工程。
因而咱们萌发了寻找一套可能跨技术栈的组件解决方案，在 9 月份的时候，咱们组一边在共建 Vue 2.x 组件库、一边在摸索跨技术组件的可能性。
在通过一直摸索后，咱们利用业务开发 Buffer 工夫，积淀了一套基于 Web Components 技术的跨技术栈组件库！
上面向大家隆重介绍，咱们的作品 Quark。
目前为止，Quark 曾经能够接受住 40w+ pv 工程，且监控数据表明运行状况良好。
【体积小】比轻更轻，Quark cdn 总包大小为 20k！
【跨技术栈】反对 Vue、React、Angular 等各类框架 / 无框架
【品质高】19+ 高质量组件
【按需加载】反对按需援用
【文档全】详尽的文档和示例
【单测】单元测试笼罩
【TS】反对 TypeScript
【SSR】反对服务端渲染
【主题】反对定制主题
（本文作者：赵存）
浏览哈啰技术更多干货合集
前端 | 后端 | 挪动端 | 算法 | 项目管理
本文系哈啰技术团队出品，未经许可，不得进行商业性转载或者应用。非商业目标转载或应用本文内容，敬请注明“内容转载自哈啰技术团队”。