Web Components 上手指南
Element（Vue） Ant Design（React）
這些組件庫(kù)的出現(xiàn)，讓我們可以直接使用已經(jīng)封裝好的組件，而且在開(kāi)源社區(qū)的幫助下，出現(xiàn)了很多的模板項(xiàng)目（ vue-element-admin、Ant Design Pro ），能讓我們快速的開(kāi)始一個(gè)項(xiàng)目。
雖然 React、Vue 為我們的組件開(kāi)發(fā)提供了便利，但是這兩者在組件的開(kāi)發(fā)思路上，一個(gè)是自創(chuàng)的 JSX 語(yǔ)法，一個(gè)是特有的單文件模板的語(yǔ)法，兩者的目標(biāo)都是想提供一種組件的封裝方法。畢竟都有其原創(chuàng)的東西在里面，和我們剛開(kāi)始接觸的 Web 基礎(chǔ)的 HTML、CSS、JS 的方式還是有些出入的。今天介紹的就是，通過(guò) HTML、CSS、JS 的方式來(lái)實(shí)現(xiàn)自定義的組件，也是目前瀏覽器原生提供的方案：Web Components。
什么是 Web Components？
Web Components 本身不是一個(gè)單獨(dú)的規(guī)范，而是由一組DOM API 和 HTML 規(guī)范所組成，用于創(chuàng)建可復(fù)用的自定義名字的 HTML 標(biāo)簽，并且可以直接在你的 Web 應(yīng)用中使用。
代碼的復(fù)用一直都是我們追求的目標(biāo)，在 JS 中可復(fù)用的代碼我們可以封裝成一個(gè)函數(shù)，但是對(duì)于復(fù)雜的HTML（包括相關(guān)的樣式及交互邏輯），我們一直都沒(méi)有比較好的辦法來(lái)進(jìn)行復(fù)用。要么借助后端的模板引擎，要么借助已有框架對(duì) DOM API 的二次封裝，而 Web Components 的出現(xiàn)就是為了補(bǔ)足瀏覽器在這方面的能力。
如何使用 Web Components？
Web Components 中包含的幾個(gè)規(guī)范，都已在 W3C 和 HTML 標(biāo)準(zhǔn)中進(jìn)行了規(guī)范化，主要由三部分組成：
Custom elements（自定義元素）：一組 JavaScript API，用來(lái)創(chuàng)建自定義的 HTML標(biāo)簽，并允許標(biāo)簽創(chuàng)建或銷(xiāo)毀時(shí)進(jìn)行一些操作； Shadow DOM（影子DOM）：一組 JavaScript API，用于將創(chuàng)建的 DOM Tree 插入到現(xiàn)有的元素中，且 DOM Tree 不能被外部修改，不用擔(dān)心元素被其他地方影響； HTML templates（HTML模板）：通過(guò) <template>、<slot>直接在 HTML 文件中編寫(xiě)模板，然后通過(guò) DOM API 獲取。
Custom elements（自定義元素）
瀏覽器提供了一個(gè)方法：customElements.define() ， 來(lái)進(jìn)行自定義標(biāo)簽的定義。該方法接受三個(gè)參數(shù)：
自定義元素的名稱(chēng)，一個(gè) DOMString 標(biāo)準(zhǔn)的字符串，為了防止自定義元素的沖突，必須是一個(gè)帶短橫線連接的名稱(chēng)（ e.g. custom-tag）。定義自定義元素的一些行為，類(lèi)似于 React、Vue 中的生命周期。 擴(kuò)展參數(shù)（可選），該參數(shù)類(lèi)型為一個(gè)對(duì)象，且需要包含 extends屬性，用于指定創(chuàng)建的元素繼承自哪一個(gè)內(nèi)置元素（e.g. { extends: 'p' }）。
下面通過(guò)一些例子，演示其用法，完整代碼放到了 JS Bin 上。
創(chuàng)建一個(gè)新的 HTML 標(biāo)簽
先看看如何創(chuàng)建一個(gè)全新的自定義元素。
class HelloUser extends HTMLElement {
constructor() {
// 必須調(diào)用 super 方法
super();
// 創(chuàng)建一個(gè) div 標(biāo)簽
const $box = document.createElement("p");
let userName = "User Name";
if (this.hasAttribute("name")) {
// 如果存在 name 屬性，讀取 name 屬性的值
userName = this.getAttribute("name");
}
// 設(shè)置 div 標(biāo)簽的文本內(nèi)容
$box.innerText = `Hello ${userName}`;
// 創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)，創(chuàng)建的其他元素應(yīng)附著在該節(jié)點(diǎn)上
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild($box);
}
}
// 定義一個(gè)名為 <hello-user /> 的元素
customElements.define("hello-user", HelloUser);
<hello-user name="Shenfq"></hello-user>
這時(shí)候頁(yè)面上就會(huì)生成一個(gè) <p> 標(biāo)簽，其文本內(nèi)容為：Hello Shenfq。這種形式的自定義元素被稱(chēng)為：Autonomous custom elements，是一個(gè)獨(dú)立的元素，可以在 HTML 中直接使用。
擴(kuò)展已有的 HTML 標(biāo)簽
我們除了可以定義一個(gè)全新的 HTML 標(biāo)簽，還可以對(duì)已有的 HTML 標(biāo)簽進(jìn)行擴(kuò)展，例如，我們需要封裝一個(gè)與 <ul> 標(biāo)簽?zāi)芰︻?lèi)似的組件，就可以使用如下方式：
class SkillList extends HTMLUListElement {
constructor() {
// 必須調(diào)用 super 方法
super();
if (
this.hasAttribute("skills") &&
this.getAttribute("skills").includes(',')
) {
// 讀取 skills 屬性的值
const skills = this.getAttribute("skills").split(',');
skills.forEach(skill => {
const item = document.createElement("li");
item.innerText = skill;
this.appendChild(item);
})
}
}
}
// 對(duì) <ul> 標(biāo)簽進(jìn)行擴(kuò)展
customElements.define("skill-list", SkillList, { extends: "ul" });
<ul is="skill-list" skills="js,css,html"></ul>
對(duì)已有的標(biāo)簽進(jìn)行擴(kuò)展，需要用到 customElements.define 方法的第三個(gè)參數(shù)，且第二參數(shù)的類(lèi)，也需要繼承需要擴(kuò)展標(biāo)簽的對(duì)應(yīng)的類(lèi)。使用的時(shí)候，只需要在標(biāo)簽加上 is 屬性，屬性值為第一個(gè)參數(shù)定義的名稱(chēng)。
生命周期
自定義元素的生命周期比較簡(jiǎn)單，一共只提供了四個(gè)回調(diào)方法：
connectedCallback：當(dāng)自定義元素被插入到頁(yè)面的 DOM 文檔時(shí)調(diào)用。disconnectedCallback：當(dāng)自定義元素從 DOM 文檔中被刪除時(shí)調(diào)用。adoptedCallback：當(dāng)自定義元素被移動(dòng)時(shí)調(diào)用。attributeChangedCallback: 當(dāng)自定義元素增加、刪除、修改自身屬性時(shí)調(diào)用。
下面演示一下使用方法：
class HelloUser extends HTMLElement {
constructor() {
// 必須調(diào)用 super 方法
super();
// 創(chuàng)建一個(gè) div 標(biāo)簽
const $box = document.createElement("p");
let userName = "User Name";
if (this.hasAttribute("name")) {
// 如果存在 name 屬性，讀取 name 屬性的值
userName = this.getAttribute("name");
}
// 設(shè)置 div 標(biāo)簽的文本內(nèi)容
$box.innerText = `Hello ${userName}`;
// 創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)，創(chuàng)建的其他元素應(yīng)附著在該節(jié)點(diǎn)上
const shadow = this.attachShadow({ mode: "open" });
shadow.appendChild($box);
}
connectedCallback() {
console.log('創(chuàng)建元素')
// 5s 后移動(dòng)元素到 iframe
setTimeout(() => {
const iframe = document.getElementsByTagName("iframe")[0]
iframe.contentWindow.document.adoptNode(this)
}, 5e3)
}
disconnectedCallback() {
console.log('刪除元素')
}
adoptedCallback() {
console.log('移動(dòng)元素')
}
}
<!-- 頁(yè)面插入一個(gè) iframe，將自定義元素移入其中 -->
<iframe width="0" height="0"></iframe>
<hello-user name="Shenfq"></hello-user>
在元素被創(chuàng)建后，等待 5s，然后將自定義元素移動(dòng)到 iframe 文檔中，這時(shí)候能看到控制臺(tái)會(huì)同時(shí)出現(xiàn) 刪除元素、移動(dòng)元素 的 log。
Shadow DOM（影子DOM）
在前面介紹自定義元素的時(shí)候，已經(jīng)用到了 Shadow DOM。Shadow DOM 的作用是讓內(nèi)部的元素與外部隔離，讓自定義元素的結(jié)構(gòu)、樣式、行為不受到外部的影響。
我們可以看到前面定義的 <hello-user> 標(biāo)簽，在控制臺(tái)的 Elements 內(nèi)，會(huì)顯示一個(gè) shadow-root ，表明內(nèi)部是一個(gè) Shadow DOM。
其實(shí) Web Components 沒(méi)有提出之前，瀏覽器內(nèi)部就有使用 Shadow DOM 進(jìn)行一些內(nèi)部元素的封裝，例如 <video> 標(biāo)簽。我們需要現(xiàn)在控制臺(tái)的配置中，打開(kāi) Show user agent ashdow DOM 開(kāi)關(guān)。
然后在控制臺(tái)的 Elements 內(nèi)，就能看到 <video> 標(biāo)簽內(nèi)其實(shí)也有一個(gè) shadow-root。
創(chuàng)建 Shadow DOM
我們可以在任意一個(gè)節(jié)點(diǎn)內(nèi)部創(chuàng)建一個(gè) Shadow DOM，在獲取元素實(shí)例后，調(diào)用 Element.attachShadow() 方法，就能將一個(gè)新的 shadow-root 附加到該元素上。
該方法接受一個(gè)對(duì)象，且只有一個(gè) mode 屬性，值為 open 或 closed，表示 Shadow DOM 內(nèi)的節(jié)點(diǎn)是否能被外部獲取。
<div id="root"></div>
<script>
// 獲取頁(yè)面的
const $root = document.getElementById('root');
const $p = document.createElement('p');
$p.innerText = '創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)';
const shadow = $root.attachShadow({mode: 'open'});
shadow.appendChild($p);
</script>
mode 的差異
前面提到了 mode 值為 open 或 closed，主要差異就是是否可以使用 Element.shadowRoot 獲取到 shadow-root 進(jìn)行一些操作。
<div id="root"></div>
<script>
// 獲取頁(yè)面的
const $root = document.getElementById('root');
const $p = document.createElement('p');
$p.innerText = '創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)';
const shadow = $root.attachShadow({mode: 'open'});
shadow.appendChild($p);
console.log('is open', $div.shadowRoot);
</script>
<div id="root"></div>
<script>
// 獲取頁(yè)面的
const $root = document.getElementById('root');
const $p = document.createElement('p');
$p.innerText = '創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)';
const shadow = $root.attachShadow({mode: 'closed'});
shadow.appendChild($p);
console.log('is closed', $div.shadowRoot);
</script>
HTML templates（HTML模板）
前面的案例中，有個(gè)很明顯的缺陷，那就是操作 DOM 還是得使用 DOM API，相比起 Vue 得模板和 React 的 JSX 效率明顯更低，為了解決這個(gè)問(wèn)題，在 HTML 規(guī)范中引入了 <tempate> 和 <slot> 標(biāo)簽。
使用模板
模板簡(jiǎn)單來(lái)說(shuō)就是一個(gè)普通的 HTML 標(biāo)簽，可以理解成一個(gè) div，只是這個(gè)元素內(nèi)的所以內(nèi)容不會(huì)展示到界面上。
<template id="helloUserTpl">
<p class="name">Name</p>
<a target="blank" class="blog">##</a>
</template>
在 JS 中，我們可以直接通過(guò) DOM API 獲取到該模板的實(shí)例，獲取到實(shí)例后，一般不能直接對(duì)模板內(nèi)的元素進(jìn)行修改，要調(diào)用 tpl.content.cloneNode 進(jìn)行一次拷貝，因?yàn)轫?yè)面上的模板并不是一次性的，可能其他的組件也要引用。
// 通過(guò) ID 獲取標(biāo)簽
const tplElem = document.getElementById('helloUserTpl');
const content = tplElem.content.cloneNode(true);
我們?cè)讷@取到拷貝的模板后，就能對(duì)模板進(jìn)行一些操作，然后再插入到 Shadow DOM 中。
<hello-user name="Shenfq" blog="http://blog.shenfq.com" />
<script>
class HelloUser extends HTMLElement {
constructor() {
// 必須調(diào)用 super 方法
super();
// 通過(guò) ID 獲取標(biāo)簽
const tplElem = document.getElementById('helloUserTpl');
const content = tplElem.content.cloneNode(true);
if (this.hasAttribute('name')) {
const $name = content.querySelector('.name');
$name.innerText = this.getAttribute('name');
}
if (this.hasAttribute('blog')) {
const $blog = content.querySelector('.blog');
$blog.innerText = this.getAttribute('blog');
$blog.setAttribute('href', this.getAttribute('blog'));
}
// 創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)，創(chuàng)建的其他元素應(yīng)附著在該節(jié)點(diǎn)上
const shadow = this.attachShadow({ mode: "closed" });
shadow.appendChild(content);
}
}
// 定義一個(gè)名為 <hello-user /> 的元素
customElements.define("hello-user", HelloUser);
</script>
添加樣式
<template> 標(biāo)簽中可以直接插入 <style> 標(biāo)簽在，模板內(nèi)部定義樣式。
<template id="helloUserTpl">
<style>
:host {
display: flex;
flex-direction: column;
width: 200px;
padding: 20px;
background-color: #D4D4D4;
border-radius: 3px;
}
.name {
font-size: 20px;
font-weight: 600;
line-height: 1;
margin: 0;
margin-bottom: 5px;
}
.email {
font-size: 12px;
line-height: 1;
margin: 0;
margin-bottom: 15px;
}
</style>
<p class="name">User Name</p>
<a target="blank" class="blog">##</a>
</template>
其中 :host 偽類(lèi)用來(lái)定義 shadow-root的樣式，也就是包裹這個(gè)模板的標(biāo)簽的樣式。
占位元素
占位元素就是在模板中的某個(gè)位置先占據(jù)一個(gè)位置，然后在元素插入到界面上的時(shí)候，在指定這個(gè)位置應(yīng)該顯示什么。
<template id="helloUserTpl">
<p class="name">User Name</p>
<a target="blank" class="blog">##</a>
<!--占位符-->
<slot name="desc"></slot>
</template>
<hello-user name="Shenfq" blog="http://blog.shenfq.com">
<p slot="desc">歡迎關(guān)注公眾號(hào)：更了不起的前端</p>
</hello-user>
這里用的用法與 Vue 的 slot 用法一致，不做過(guò)多的介紹。
總結(jié)
到這里 Web Components 的基本用法就介紹得差不多了，相比于其他的支持組件化方案的框架，使用 Web Components 有如下的優(yōu)點(diǎn)：
瀏覽器原生支持，不需要引入額外的第三方庫(kù)； 真正的內(nèi)部私有化的 CSS，不會(huì)產(chǎn)生樣式的沖突； 無(wú)需經(jīng)過(guò)編譯操作，即可實(shí)現(xiàn)的組件化方案，且與外部 DOM 隔離；
Web Components 的主要缺點(diǎn)就是標(biāo)準(zhǔn)可能還不太穩(wěn)定，例如文章中沒(méi)有提到的模板的模塊化方案，就已經(jīng)被廢除，現(xiàn)在還沒(méi)有正式的方案引入模板文件。而且原生的 API 雖然能用，但是就是不好用，要不然也不會(huì)出現(xiàn) jQuery 這樣的庫(kù)來(lái)操作 DOM。好在現(xiàn)在也有很多基于 Web Components 實(shí)現(xiàn)的框架，后面還會(huì)開(kāi)篇文章專(zhuān)門(mén)講一講使用 Web Components 的框架 lit-html、lit-element。
好啦，今天的文章就到這里了，希望大家能有所收獲。