哈啰前端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 标签，它不会干扰其它标签样式。

下面我们来看下更具象的组件代码：

目前组件的内容是写死的，该怎么动态生成DOM呢？我们继续往下看：

答案就是借助 Web Components 组件的生命周期来做，其中 connectedCallback 就是 dom 节点首次挂载调用，且只会调用一次，在这里可以拿到外部传入的属性。属性变更会调用 attributeChangedCallback, 在这里可以做 dom 更新相关的事情，这里不在展开，大家可以自行探索下。

dom 能动态生成了，点击事件怎么玩？
其实和大家平时写 Vue 组件、React 组件一样，在 Vue 中是 @click，在 React 中是 onClick，具体示例可参考下图：