什么是Web Component

Web Component是一套Web瀏覽器的技術(shù)和規(guī)范，能夠讓開(kāi)發(fā)者定制自己的HTML元素

來(lái)自MDN的描述：

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

Web Component由三項(xiàng)技術(shù)組成：

• Custom element（自定義元素）：創(chuàng)建一個(gè)自定義元素，并自定義其行為。

• Shadow DOM（影子 DOM）：將若干元素封裝成獨(dú)立的DOM，并且與主文檔DOM分開(kāi)呈現(xiàn)，互不影響。

• HTML template（HTML 模板）：用于定義可重用的HTML，在HTML中使用類(lèi)似于前端框架（如Vue）中的模板，一次定義可重用代碼，涉及到兩個(gè)HTML標(biāo)簽：<template> 和 <slot>

廢話(huà)不多說(shuō)，讓我們以一個(gè)自定義一個(gè)GitHub標(biāo)簽快速入門(mén)

快速入門(mén)

聲明式地創(chuàng)建HTML模板

和往常我們書(shū)寫(xiě)HTML類(lèi)似，唯一不同點(diǎn)便是以<template>包裹：

<template id="template_github_icon">
	<a href="https://github.com/martixjohn" style="display: block; width: 100%; height: 100%" target="_blank">
		<svg style="width: 100%; height: 100%"  aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" height="32">
			<path fill="currentColor"
					d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z">
			</path>
		</svg>
	</a>
	<style>
		a {
			display: block;
		}
		a > svg {
			color: #333;
			transition: all .3s;
		}
		a:hover > svg{
			color: #000;
			filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
		}
	</style>
</template>

這里實(shí)質(zhì)上是一個(gè)超鏈接包裹了一個(gè)SVG圖形，圖形是我們的GitHub圖標(biāo)。

你也許發(fā)現(xiàn)了：

• template標(biāo)簽含有id，這是為了后續(xù)使用JavaScript去引用它并定義元素。

• 這里創(chuàng)建了一個(gè)style標(biāo)簽并編寫(xiě)了CSS樣式，甚至直接使用元素選擇器而沒(méi)有以一個(gè)className或者id去應(yīng)用樣式，有人會(huì)問(wèn)這樣會(huì)不會(huì)導(dǎo)致和頁(yè)面沖突。

  答案是不會(huì)，這里的樣式局限于這個(gè)模板內(nèi)部，和外部DOM是隔離的。

使用JavaScript API定義和注冊(cè)我們的元素

// customElements.define()
customElements.define(
	// 元素名，必須是Kebab case命名
	// 目的是在頁(yè)面中以<github-icon />去引用
	"github-icon",
	// 定義類(lèi)，需要繼承自HTMLElement
	class extends HTMLElement {
		// 構(gòu)造器
		constructor() {
			// 必須調(diào)用父級(jí)構(gòu)造
			super();
			// 獲取上一步定義的template模板
			const template = document.getElementById("template_github_icon");
			// 獲取模板內(nèi)容
			const templateContent = template.content;
			// 獲取本元素的影子DOM樹(shù)根，mode為true表示以后可以通過(guò)JavaScript直接外部訪問(wèn)根節(jié)點(diǎn)
			const shadowRoot = this.attachShadow({ mode: "open" });
			// 將template的內(nèi)容克隆并附加到shadowRoot,
			shadowRoot.appendChild(
				// true表示深拷貝
				templateContent.cloneNode(true)
			);
		}
	}
);

實(shí)際上在第一步你可以不以HTML創(chuàng)建“模板”，而是在類(lèi)的構(gòu)造器中以JS自定義元素的創(chuàng)建過(guò)程

使用自定義元素

HTML頁(yè)面上使用

和普通元素使用方式完全相同，你甚至還可以為其添加屬性(attribute)

<github-icon style="width: 40px; height: 40px;"></github-icon>

JavaScript內(nèi)創(chuàng)建

也和普通元素的創(chuàng)建方式相同

const element = document.createElement('github-icon');
// element.xxx=xxx

總結(jié)

以上演示了如何自定義元素，并在頁(yè)面中使用他們。

Web Component的靈活和強(qiáng)大不止于此，你甚至還可以：

• 使用類(lèi)似于Vue中的插槽slot以替換部分不相同的代碼

• 以現(xiàn)有的元素為母版去擴(kuò)展

• 自定義生命周期函數(shù)

• 響應(yīng)屬性變化

• ...

如果你仔細(xì)發(fā)現(xiàn)的話(huà)，本博客頁(yè)面使用的GitHub圖標(biāo)正是一個(gè)自定義元素。

參考

• Web Component：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components

• 使用自定義元素：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements

• 使用 shadow DOM：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM

• 使用 template 和 slot：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_templates_and_slots