哈啰前端Web Components最佳实践前言这是业务平台前端在有关【Web Components】在业务实践输出的

前言

这是业务平台前端在有关【Web Components】在业务实践输出的第 5 篇文章。

通过本文，您将了解什么是Web components，以及业务中台如何将其落地到业务场景的最佳实践。

本文截图来源于业务平台前端内部技术分享。

官网：quark-ecosystem.github.io/quarkd-docs

一、初识（什么是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 就实现跨端，感兴趣的可以看一下。