WebComponents

Web Components 是一套不同的技術，允許您創(chuàng)建可重用的定制元素（它們的功能封裝在您的代碼之外）并且在您的 web 應用中使用它們。

Web Components 可以理解成自定義組件。

使用 Web Components 可以達到如原生的 video 標簽的效果，video 標簽在被瀏覽器解析后有許多子節(jié)點，如播放控制器部分的控制按鈕，這些在使用 video 的時候是不需要關心的，也不用手動書寫這些子節(jié)點，同時又能被多處復用。

這些子節(jié)點通常是看不見的，藏起來的，但是通過 Chrome 的設置可以顯示出來。

這種看不見的子節(jié)點被稱為 Shadow DOM，許多文獻稱為 影子節(jié)點 或者 影子 DOM。

Web Components 具有非常好的隔離性，特別在樣式表現(xiàn)上，可以做到完全隔離。

1. 使用

一個 Web Components 繼承自 HTMLElement，然后通過 customElements.define() 來注冊這個 Component。

以下例子?會創(chuàng)建一個名為 to-imooc 的組件。

class ToImooc extends HTMLElement { // Web Components 繼承自 HTMLElement
  constructor() {
    super(); // 調用父類構造函數(shù)

    const link = document.createElement('a'); // 創(chuàng)建一個 a 元素

    link.href = 'javascript:;'; // 默認什么都不做
    link.innerText = 'GOGOGO! Imooc 出發(fā)!'; // 顯示的文案

    link.addEventListener('click', () => { // 跳轉事件
      alert('坐穩(wěn)啦！要發(fā)車啦?。。?);

      window.location.href = '//imooc.com';
    });

    this.append( // this 就是自定義的節(jié)點
      link,
      document.createElement('br'),
    );
  }
}

window.customElements.define('to-imooc', ToImooc);

這樣就創(chuàng)建好了一個自定義的組件。

然后在 HTML 中使用就好了。

<to-imooc></to-imooc>
<to-imooc></to-imooc>
<to-imooc></to-imooc>
<to-imooc></to-imooc>

這樣就完成了一個簡單的組件，可以重復使用。

2. 應用

根據(jù) Can I Use 可以看出，該特性現(xiàn)在瀏覽器支持并不廣泛，不太適合在生產(chǎn)環(huán)境使用，但基于該特性，還是衍射除了許多 “未來”。

2.1 微前端

微前端 尚處在發(fā)展時期，其核心概念和 微服務 相似。

現(xiàn)階段較為常用的微前端框架為 single-spa 和 qiankun，后者是基于前者實現(xiàn)的。

該技術能做到 技術棧無關，即一個應用，能由多個不同技術的子應用構成，同時做到子應用的相互隔離，這里的隔離就可以選擇采用 Web Components 實現(xiàn)。

2.2 Omi

Omi 是由騰訊開源的跨端框架，其就是基于 Web Components 來設計的。

3. 小結

雖然 Web Components 還存在兼容性問題，但可以作為預備知識進行了解，或者應用于一些內部對兼容性無要求的項目。