前端应该知道Web Components

看到这个标题可能有的小伙伴想到的是React 、Vue 或者 Angular 的自定义组件，no no no！

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

一、流行组件库现状

前端目前比较主流的框架有 react，vuejs，angular 等。

我们通常去搭建组件库的时候都是基于某一种框架去搭建，比如 ant-design 是基于 react 搭建的 UI 组件库，而 elementUI 则是基于 vuejs 搭建的组件库。虽然目前社区有相关工具，提供框架之间的转化服务，比如讲 vuejs 组件转化为 react 组件。但是毕竟是不同的框架，有不同的标准。因此框架api发生变动，那么你就需要重写转化逻辑，显然是不灵活的。

那么有没有更好的方案，一次编写，到处使用呢？

答案就是 Web Components，一起去看看是什么吧！

二、什么是web-component

Web Components 是允许我们创建可重用的定制元素（即组件）的一种技术，可以在你喜欢的任何地方重用，不必担心代码冲突，本质就是组件化。由于web components是由w3c组织去推动的，因此它很有可能在不久的将来成为浏览器的一个标配。

Web Components 主要有下面四部分组成：

Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML templates（HTML模板）：<template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
HTML Imports（HTML导入）：一旦定义了自定义组件，最简单的重用它的方法就是使其定义细节保存在一个单独的文件中，然后使用导入机制将其导入到想要实际使用它的页面中。HTML 导入就是这样一种机制，尽管存在争议 — Mozilla 根本不同意这种方法，并打算在将来实现更合适的。

三、优缺点

使用 web components 搭建组件库能够带来什么好处呢？前面说了，web components 是 w3c 推动的一系列的规范，它是一个标准。如果我们使用 web components 的 api 开发一个组件，这个组件是脱离框架存在的，也就是说你可以在任何框架中使用它，当然也可以直接在原生 js 中使用。

互操作性 — 组件超越框架而存在，可以在不同的技术栈中使用
寿命 — 因为组件的互操作性，它们将有更长的寿命，基本不需要为了适应新的技术而重写
移植性 — 组件可以在任何地方使用，因为很少甚至没有依赖，组件的使用障碍要明显低于依赖库或者框架的组件

但同时由于 web components 的标准暂时还是不稳定的，并且缺少文档、范例、教程，想要入门是一件相当困难的事情，就好像你直接用原生 canvas api 去开发游戏一样，尤其是如果要支持旧式浏览器。

四、使用方法

声明自定义标签:

window.customElements.define(name, constructor, options?);

其中 name 为自定义标签的标签名。
constructor 定义自定义标签的功能。
options 为 { extends: htmlTagName } ，定义自定义标签继承于哪种组件。例如：

class AppDrawer extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.
    
    // 开启 shadow dom 根结点
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <!-- style中的样式只在组件内部生效 -->
      <style>#tabs { ... }</style>
      <!-- id的作用域只在组件内部 -->
      <div id="tabs">...</div>
      <div id="panels">...</div>
    `;
  }
  
  // 标签被添加到dom中时触发
  connectedCallback() {
    ...
  }
  
  // 标签被移除时触发
  disconnectedCallback() {
    ...
  }
  
  // 属性变化时触发
  attributeChangedCallback(attrName, oldVal, newVal) {
    ...
  }
}

定义后即可在html中直接使用：

<app-drawer></app-drawer>

插槽

在定义组件内部模版时可使用 <slot> 标记声明此处未来可能会被外部元素代替，以增强组件的扩展性。如果有 Vue 开发经验应该对 slot 并不陌生。

使用：

<better-button>
  <!-- 具名插槽 -->
  <img src="gear.svg" slot="icon"> 
  <span>Settings</span>
</better-button>

定义：

#shadow-root
  <style>...</style>
  <!-- 具名插槽 -->
  <slot name="icon"></slot>
  <span id="wrapper">
  <!-- 默认插槽 -->
    <slot>Button</slot>
  </span>

样式

Shawdom Dom 的开启会完全隔绝组件内外，所以外部的样式是无法作用的组件内部的（插槽除外）。如果需要在外部修改内部样式只能使用 css var() 函数。

外部样式：

app-drawer {
  --text-color: red;
}

内部样式：

#tabs {
  color: var(--text-color, green);
}

五、Web Component 库

如何更简便的使用这个技术呢？现阶段流行的库有 Polymer、[stencil](https://stenciljs.com/
/) 和 Bosonic。它们提供了一系列能够被使用和拓展的组件。正如所有流行的项目一样，它们有健全的文档、范例和稳定的社区。

但是，这些库会让组件拥有一个重要的依赖，使用这些组件的用户必须去确保这个依赖的存在。下面我简单列一个 stencil 的例子：

import { Component, Prop, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss'
})
export class MyComponent {
  // Indicate that name should be a property on our new component
  @Prop() first: string;

  @Prop() last: string;

  @State() isVisible: boolean = true;

  render() {
    return (
      <p>
        Hello, my name is {this.first} {this.last}
      </p>
    );
  }
}

还挺简单的~

六、总结

Web components 的出现真正意义上原生实现了样式私有化，DOM作用域及扩展原生组件，让我们应用的构建方式可以迅速地适应变化，不用再担心多个组件库不能共用组件的问题。web components 是基于最新的 web 标准，所以它的的互操作性，可以让我们的代码拥有更长的寿命。最终，因为更少的依赖和前置条件，我们的组件可以满足更多人的需求。

想要深入了解有关 Web Components 的更多信息？大家可以查看 MDN 官网或者持续关注本人，我会不时更新技术文档~

前端应该知道Web Components