关于Web Components技术

前言
Web Components 的Api、高级用法和相关工具很多，本文并不是全面的教程，只是一个简单的介绍和演示，感兴趣的话可以深入了解

一、发展历程#

出现：2011 年，html templates 的概念首次提出，同时 Google 开始开发 Polymer 项目，Web Components 的概念也由 Google 工程师 Alex Russell 在 Fronteers 会议上首次提出
发展：
- 2013 年，Google 发布了 Polymer 框架，为 Web Components 提供了支持，同年 W3C 开始制定 Web Components 标准
- 2014 年，HTML Templates 被添加到 Web Components 规范草案中
- 2015 年，Custom Elements 和 Shadow DOM 被添加到 Web Components 规范草案中，同年发布了 Web Components 1.0 草案
标准化：2017 年，Web Components 1.0 正式标准发布。2018 年，Web Components 规范正式成为 W3C 的推荐标准，Chrome 63 正式支持 Web Components 技术

二、`Web Component`的定义#

MDN中的解释：Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。

在现代流行的前端开发框架vue、react等中，基本都使用了组件化思想，由此也诞生了各式各样的UI组件库，其出现主要目的就是为了代码复用，提高开发效率。

通俗点讲，Web Component 就是浏览器支持的原生组件 ，允许你创建可以复用的自定义HTML元素，并且可以像普通HTML标签那样直接使用。

它主要包括下面三个核心技术：

Cutsom Element#

创建#

自定义元素需要定义一个类，所有<my-custom-element></my-custom-element>都将会是这个类的实例：

1
class MyCustomElement extends HTMLElement {
2
    constructor() {
3
        super();
4
        // 在这里可以进行元素的初始化操作，比如添加子元素、设置属性等
5
        this.textContent = '这是一个自定义元素';
6
    }
7
}
8
// 使用window.customElements.define()告诉浏览器这个自定义元素和哪个类关联
9
customElements.define('my-custom-element', MyCustomElement);

TIP
上面这个自定义元素(Web Component)继承了HTMLElement，所以它将可以访问各种类方法，比如，组件的生命周期回调。

自定义元素的内容#

上面我们只是创建了自定义元素，其中还没什么实质内容，你可以通过任意DOM操作添加自定义内容：

1
class MyCustomElement extends HTMLElement {
2
  constructor() {
3
    super();
4

5
    var image = document.createElement('img');
6
    image.src = 'xxx';
7
    image.classList.add('image');
8

9
    var container = document.createElement('div');
10
    container.classList.add('container');
11

12
    var name = document.createElement('p');
13
    name.classList.add('name');
14
    name.innerText = 'User Name';
15

16
    var email = document.createElement('p');
17
    email.classList.add('email');
18
    email.innerText = 'yourmail@some-email.com';
19

20
    var button = document.createElement('button');
21
    button.classList.add('button');
22
    button.innerText = 'Follow';
23

24
    container.append(name, email, button);
25
    this.append(image, container);
26
  }
27
}

自定义参数#

1
<MyCustomElement
2
  image="https://semantic-ui.com/images/avatar2/large/kristy.png"
3
  name="User Name"
4
  email="yourmail@some-email.com"
5
></MyCustomElement>

1
class UserCard extends HTMLElement {
2
  constructor() {
3
    super();
4

5
    var templateElem = document.getElementById('userCardTemplate');
6
    var content = templateElem.content.cloneNode(true);
7
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
8
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
9
    content.querySelector('.container>.email').innerText = this.getAttribute('email');
10
    this.appendChild(content);
11
  }
12
}
13
window.customElements.define('my-custom-element', MyCustomElement);

Shadow DOM#

一种封装技术。简单来说，它允许将一个DOM Tree(包含元素、样式等)隐藏在一个’影子’中，与主文档的DOM树隔离，以此达到防止样式和脚本冲突的目的。

CAUTION
需要注意的是，这并不是虚拟DOM(性能优化)！

一个简单的Shadow DOM示例:

1
class MyElementWithShadowDOM extends HTMLElement {
2
    constructor() {
3
        super();
4
        // 创建Shadow DOM
5
        const shadow = this.attachShadow({mode: 'open'});
6
        const p = document.createElement('p');
7
        p.textContent = '这是Shadow DOM中的内容';
8
        shadow.appendChild(p);
9
    }
10
}
11
customElements.define('my-element-with-shadow-dom', MyElementWithShadowDOM);

HTML Templates#

上面我们通过DOM操作编写组件结构很麻烦，Web Components API提供了template来简化这个过程。它本质上就是一种定义HTML片段的方式(如果你熟悉Vue，应该对这种写法很熟悉)。

使用的template形式多种多样，你可以将其插入HTML，然后通过js脚本获取:

1
<template id="my-template">
2
    <style>
3
        /* :host伪类可指代自定义元素本身 */
4
        :host {}
5
        /* ... ... */
6
    </style>
7
    <div>
8
        <p>这是模板中的内容</p>
9
    </div>
10
</template>

1
const template = document.getElementById('my-template');
2
const content = template.content.cloneNode(true);
3
document.body.appendChild(content);

但通常，为了更方便维护，你可能不希望template与js分离，那么你也可以在js中定义template：

1
const template = document.createElement('template')
2
template.innerHTML = /*html*/ `
3
<style>
4
... ...
5
</style>
6

7
<div class="custom-card"></div>
8
`
9
class CustomCard extends HTMLElement {
10
  private _shadowRoot: ShadowRoot
11
  constructor() {
12
    super()
13

14
    this._shadowRoot = this.attachShadow({ mode: 'closed' })
15
    const content = template.content.cloneNode(true)
16
    this._shadowRoot.appendChild(content)
17
  }
18
}

三、优劣分析#

Web Components的优点#

纯原生：现代浏览器(Chrome, FireFox, Safari等)原生支持，不需要引入额外的库。因此，它可以在任何原生JS或者JS框架中使用，具有良好的兼容性
封装性好：通过Shadow DOM,能够很好的封装内部样式的结构
可复用等

Web Components的不足#

生态和工具支持较弱：目前的生态系统还不够丰富，编写简单的组件尚可，对于复杂组件，需要开发者自己实现更多的功能(例如状态管理，数据响应式等)，效率低、开发成本较高，也不支持SSR等

四、常见应用场景#

UI组件库：可以实现一个通用的，跨框架，可在多个项目中使用的UI组件库
第三方组件：可以创建轻松嵌入到其他应用的小组件(例如：社交媒体的分享按钮、广告组件、视频播放器、评论窗口等)。本博客的文章目录，友链卡片，追番列表等都使用了Web Components技术
微前端
- 模块划分与独立部署：在微前端场景中，不同的团队可以开发和部署各自的前端应用，这些应用可以被看作是大型应用的 “微模块”。Web Components 可以作为这些微模块的基础构建单元
- 集成与通信：Web Components 能够方便地集成到不同的宿主应用中。它们可以通过自定义事件等方式进行通信

五、编写一个简单的`Web Component`#

以本博客的友链卡片组件做一个最简单的示例：

1
import { loadImage } from '@utils/file-utils'
2

3
const template = document.createElement('template')
4
template.innerHTML = /*html*/ `
5
<style>
6
  ... ...
7
</style>
8

9
<div class="info-card">
10
  <span class="tag"></span>
11
  <a class="link" target="_blank">
12
    <img class="avatar">
13
    <div class="info">
14
      <div class="name"></div>
15
      <div class="desc"></div>
16
    </div>
17
  </a>
18
</div>
19
`
20

21
class InfoCard extends HTMLElement {
22
  private _shadowRoot: ShadowRoot
23
  private tag: string | null = null
24
  private link = ''
25
  private avatar = ''
26
  private name = ''
27
  private desc = ''
28
  constructor() {
29
    super()
30

31
    this._shadowRoot = this.attachShadow({ mode: 'closed' })
32
    const content = template.content.cloneNode(true)
33

34
    this._shadowRoot.appendChild(content)
35
  }
36

37
  static get observedAttributes() {
38
    return ['tag', 'link', 'avatar', 'name', 'desc']
39
  }
40

41
  attributeChangedCallback(
42
    name: 'tag' | 'link' | 'avatar' | 'name' | 'desc',
43
    oldVal: string | null,
44
    newVal: string | null,
45
  ) {
46
    if (newVal !== null) {
47
      this[name] = newVal
48
    }
49
    this.render()
50
  }
51

52
  connectedCallback() {
53
    this.render()
54
  }
55

56
  async render() {
57
    const tagElement = this._shadowRoot.querySelector('.tag') as HTMLSpanElement
58
    const linkElement = this._shadowRoot.querySelector(
59
      '.link',
60
    ) as HTMLAnchorElement
61
    const avatarElement = this._shadowRoot.querySelector(
62
      '.avatar',
63
    ) as HTMLImageElement
64
    const nameElement = this._shadowRoot.querySelector(
65
      '.name',
66
    ) as HTMLDivElement
67
    const descElement = this._shadowRoot.querySelector(
68
      '.desc',
69
    ) as HTMLDivElement
70

71
    if (tagElement) {
72
      if (this.tag === null) {
73
        tagElement.style.display = 'none'
74
      }
75
      tagElement.textContent = this.tag
76
    }
77
    if (linkElement) {
78
      linkElement.href = this.link
79
      linkElement.title = this.name
80
    }
81
    if (avatarElement) {
82
      avatarElement.src = await loadImage(this.avatar, {
83
        defaultImageUrl: '/404.gif',
84
      })
85
      avatarElement.setAttribute('alt', this.name)
86
    }
87
    if (nameElement) {
88
      nameElement.textContent = this.name
89
    }
90
    if (descElement) {
91
      descElement.textContent = this.desc
92
    }
93
  }
94
}
95

96
customElements.define('info-card', InfoCard)