什麼是Web Component Web Component是一套Web瀏覽器的技術和規範，能夠讓開發者定製自己的HTML元素 來自MDN的描述： Web Component 是一套不同的技術，允許你創建可重用的定製元素（它們的功能封裝在你的代碼之外）並且在你的 web 應用中使用它們。 Web C ...
什麼是Web Component
Web Component是一套Web瀏覽器的技術和規範，能夠讓開發者定製自己的HTML元素
來自MDN的描述：
Web Component 是一套不同的技術，允許你創建可重用的定製元素（它們的功能封裝在你的代碼之外）並且在你的 web 應用中使用它們。
Web Component由三項技術組成：
-
Custom element（自定義元素）：創建一個自定義元素，並自定義其行為。
-
Shadow DOM（影子 DOM）：將若幹元素封裝成獨立的DOM，並且與主文檔DOM分開呈現，互不影響。
-
HTML template（HTML 模板）：用於定義可重用的HTML，在HTML中使用類似於前端框架（如Vue）中的模板，一次定義可重用代碼，涉及到兩個HTML標簽：<template> 和 <slot>
廢話不多說，讓我們以一個自定義一個GitHub標簽快速入門
快速入門
聲明式地創建HTML模板
和往常我們書寫HTML類似，唯一不同點便是以<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>
這裡實質上是一個超鏈接包裹了一個SVG圖形，圖形是我們的GitHub圖標。
你也許發現了：
-
template標簽含有id，這是為了後續使用JavaScript去引用它並定義元素。
-
這裡創建了一個style標簽並編寫了CSS樣式，甚至直接使用元素選擇器而沒有以一個className或者id去應用樣式，有人會問這樣會不會導致和頁面衝突。
答案是不會，這裡的樣式局限於這個模板內部，和外部DOM是隔離的。
使用JavaScript API定義和註冊我們的元素
// customElements.define()
customElements.define(
// 元素名，必須是Kebab case命名
// 目的是在頁面中以<github-icon />去引用
"github-icon",
// 定義類，需要繼承自HTMLElement
class extends HTMLElement {
// 構造器
constructor() {
// 必須調用父級構造
super();
// 獲取上一步定義的template模板
const template = document.getElementById("template_github_icon");
// 獲取模板內容
const templateContent = template.content;
// 獲取本元素的影子DOM樹根，mode為true表示以後可以通過JavaScript直接外部訪問根節點
const shadowRoot = this.attachShadow({ mode: "open" });
// 將template的內容克隆並附加到shadowRoot,
shadowRoot.appendChild(
// true表示深拷貝
templateContent.cloneNode(true)
);
}
}
);
實際上在第一步你可以不以HTML創建“模板”，而是在類的構造器中以JS自定義元素的創建過程
使用自定義元素
HTML頁面上使用
和普通元素使用方式完全相同，你甚至還可以為其添加屬性(attribute)
<github-icon style="width: 40px; height: 40px;"></github-icon>
JavaScript內創建
也和普通元素的創建方式相同
const element = document.createElement('github-icon');
// element.xxx=xxx
總結
以上演示瞭如何自定義元素，併在頁面中使用他們。
Web Component的靈活和強大不止於此，你甚至還可以：
-
使用類似於Vue中的插槽slot以替換部分不相同的代碼
-
以現有的元素為母版去擴展
-
自定義生命周期函數
-
響應屬性變化
-
...
如果你仔細發現的話，本博客頁面使用的GitHub圖標正是一個自定義元素。
參考
-
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
感謝你的閱讀，覺得不錯麻煩幫忙點個小小的推薦吧
