Web Component 概述

Web Component 是一种用于构建可复用用户界面组件的技术，开发者可以创建自定义的 HTML 标签，并将其封装为包含逻辑和样式的独立组件，从而在任何 Web 应用中重复使用。

每个 Web Component 都具有自己的 DOM 和样式隔离，避免了全局 CSS 和 JavaScript 的冲突问题。它还支持自定义事件和属性，可以与其他组件进行通信和交互。

不同于 Vue/React 等社区或厂商的组件化开发方案，Web Component 被定义在标准的 HTML 和 DOM 标准中。它由一组相关的 Web 平台 API 组成，也可以与现有的前端框架和库配合使用。

Web Component 的兼容性良好，可以在现代浏览器中直接使用，也可以通过 polyfill 兼容到旧版浏览器（IE11 理论上可以兼容，出于初步调研的考虑，本文不对兼容性作过多探讨）。

同类组件化方案比较

TL;DR

实例：用异构系统共建 web components

https://gitee.com/tonylua/web-component-test1/tree/master

Web Component 关键特性

Custom Elements（自定义元素）

是 Web 标准中的一项功能，它允许开发者自定义新的 HTML 元素，开发者可以使用 JavaScript 和 DOM API，使新元素具有自定义的行为和功能

4.13.1.1 Creating an autonomous custom element

This section is non-normative.

For the purposes of illustrating how to create an autonomous custom element, let's define a custom element that encapsulates rendering a small icon for a country flag. Our goal is to be able to use it like so:

<code><flag-icon country="nl"></flag-icon>code>

To do this, we first declare a class for the custom element, extending HTMLElement:

class FlagIcon extends HTMLElement {

  constructor() {

    super();

    this._countryCode = null;

  }

  static observedAttributes = ["country"];

  attributeChangedCallback(name, oldValue, newValue) {

    // name will always be "country" due to observedAttributes

    this._countryCode = newValue;

    this._updateRendering();

  }

  connectedCallback() {

    this._updateRendering();

  }

  get country() {

    return this._countryCode;

  }

  set country(v) {

    this.setAttribute("country", v);

  }

  _updateRendering() {

    ...

  }

}

We then need to use this class to define the element:

customElements.define("flag-icon", FlagIcon);

继承自基类 HTMLElement

自定义的元素名称需符合 DOMString 标准，简单来说就是必须带短横线

其中 observedAttributes 声明的属性才能被 attributeChangedCallback() 监听

完整生命周期方法说明为:

class MyCustomElement extends HTMLElement {

  constructor() {

    super();

    // 在构造函数中进行初始化操作

    // 用 this.appendChild(...) 等挂载到dom中

    // 用 addEventListener() 绑定事件到 this.xxx 上

  }

  connectedCallback() {

    // 元素被插入到文档时触发，等价于 vue 的 mounted

  }

  disconnectedCallback() {

    // 元素从文档中移除时触发，等价于 vue 的 beforeDestory / destoyed

  }

  attributeChangedCallback(attributeName, oldValue, newValue) {

    // 元素的属性被添加、移除或更改时触发，等价于 vue 的 beforeUpdate / updated

  }

}

除了继承 HTMLElement，也可以继承其既有子类，并在使用是采用原生标签（被继承类） + is 语法，如：

// Create a class for the element

class WordCount extends HTMLParagraphElement {

  constructor() {

    // Always call super first in constructor

    super();

    // Constructor contents omitted for brevity

    // …

  }

}

// Define the new element

customElements.define("word-count", WordCount, { extends: "p" });

<p is="word-count"></p>code>

Shadow DOM

Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。

这里，有一些 Shadow DOM 特有的术语需要我们了解：

Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。

Shadow tree：Shadow DOM 内部的 DOM 树。

Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。

Shadow root: Shadow tree 的根节点。

你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 <code>element.style 属性），或者为整个 Shadow DOM 添加样式（例如在 <style> 元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 :focus-within），这为封装提供了便利。

注意，不管从哪个方面来看，Shadow DOM 都不是一个新事物——在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的 <video> 元素为例。你所能看到的只是一个 <video> 标签，实际上，在它的 Shadow DOM 中，包含了一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素（custom element）维护一组 Shadow DOM。

基本用法

可以使用 Element.attachShadow() 方法来将一个 shadow root 附加到任何一个元素上。它接受一个配置对象作为参数，该对象有一个 mode 属性，值可以是 open 或者 closed：

let shadow = elementRef.attachShadow({ mode: "open" });

let shadow = elementRef.attachShadow({ mode: "closed" });

open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM，例如使用 Element.shadowRoot 属性：

let myShadowDom = myCustomElem.shadowRoot;

如果你将一个 Shadow root 附加到一个 Custom element 上，并且将 mode 设置为 closed，那么就不可以从外部获取 Shadow DOM 了——myCustomElem.shadowRoot 将会返回 null。浏览器中的某些内置元素就是如此，例如<video>，包含了不可访问的 Shadow DOM。

如果你想将一个 Shadow DOM 附加到 custom element 上，可以在 custom element 的构造函数中添加如下实现（目前，这是 shadow DOM 最实用的用法）：

let shadow = this.attachShadow({ mode: "open" });

将 Shadow DOM 附加到一个元素之后，就可以使用 DOM APIs 对它进行操作，就和处理常规 DOM 一样。

var para = document.createElement('p');

shadow.appendChild(para);

etc.

注意：

要使用 Chrome 调试器检查 Shadow DOM，需要选中调试器的 Preferences / Elmenets 下的 show user agent shadow DOM 框*；比如对于上文提到的 <video>，在打开该调试选项后，就能在元素面板中看到 <video> 下挂载的 shadow tree

一些比较旧的资料中会出现 attachShadow() 的前身 createShadowRoot()，语义基本相同；createShadowRoot()已经被废弃，它是在 Shadow DOM v0 规范中引入的。Shadow DOM 的最新版本是 v1，是 Web 标准的一部分。

HTML templates 和 slot

<template> 元素允许开发者在 HTML 中定义一个模板，其中可以包含任意的 HTML 结构、文本和变量占位符。此元素及其内容不会在 DOM 中呈现，但仍可使用 JavaScript 去引用它。

<template id="my-paragraph">code>

  <p>My paragraph</p>

</template>

上面的代码不会展示在你的页面中，直到你用 JavaScript 获取它的引用，然后添加到 DOM 中，如下面的代码：

let template = document.getElementById("my-paragraph");

let templateContent = template.content;

document.body.appendChild(templateContent);

模板（Template）本身就是有用的，而与 web 组件（web component）一起使用效果更好。我们定义一个 web 组件使用模板作为阴影（shadow）DOM 的内容，叫它 <my-paragraph>：

customElements.define(

  "my-paragraph",

  class extends HTMLElement {

    constructor() {

      super();

      let template = document.getElementById("my-paragraph");

      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      shadowRoot.appendChild(templateContent.cloneNode(true));

    }

  },

);