網頁元件的優點在於可重複使用：您只需建立一次 UI 小工具，就能重複使用。當您時 需要使用 JavaScript 建立網頁元件，不需要 JavaScript 程式庫。您需要的一切，HTML 與相關聯的 API 都能提供。
Web Component 標準包含三個部分：HTML 範本、 Custom Elements (自訂元素) 和 Shadow DOM。 結合運用，您可以建構能順暢整合的獨立式 (封裝) 可重複使用的元素 就如同先前介紹的所有其他 HTML 元素
在本節中，我們會建立
我們將討論如何使用 和 slot 屬性以及 JavaScript 建立採用的範本
一個封裝的 Shadow DOM。我們會重複使用已定義的元素、自訂一段文字
例如元素或網頁元件我們也會簡要討論如何在自訂元素內部和外部使用 CSS。
元素可用來宣告要透過 JavaScript 複製並插入 DOM 的 HTML 片段。根據預設，系統不會轉譯元素的內容。而是使用 JavaScript 例項化。
由於 元素的內容不會寫入畫面，因此 及其內容不會轉譯。
是的，這個 Codepen 沒有任何內容，但如果您檢查「HTML」分頁，就會看到 標記。
在這個範例中， 不是 DOM 中 的子項。 元素的內容是子項
HTMLTemplateElement.content 傳回的 DocumentFragment 中
資源。如要顯示出來，您必須使用 JavaScript 來擷取內容，並將這些內容附加到 DOM。
這個簡短的 JavaScript 並未建立自訂元素。這個範例卻將 的內容附加至 。
內容已成為可見、可設定樣式的 DOM。
要求 JavaScript 只使用一個星級評等的範本並不實用，但為單一星級評等建立網路元件是不夠的 而可自訂的星級評等小工具相當實用。
我們納入了每個出現次數圖例的自訂版位。HTML 提供 元素，如果提供名稱，即可建立一個「已命名的版位」。可使用已命名的版位
自訂網頁元件中的內容
在範本中，我們將 變更為
如果元素的版位屬性值符合name
命名版位的名稱如果自訂元素沒有與版位相符的項目，則會顯示 ，只要使用者在 HTML 的 HTML 中只包含
Is this text visible?
slot 屬性是會使用的全域屬性
取代 中 。其實不一定要使用。在這個範本中，
未定義的元素
在 中，我們使用了 類似，
請注意，系統不會轉譯 和內容。 是已知元素，其中包含的內容
物件畫面尚未定義 ，顯示方式與位於 時相同。
接著，我們來定義元素，將這個無法辨識的元素轉換為自訂元素。
自訂元素
您必須使用 JavaScript 才能定義自訂元素。定義後，系統會將 slot 屬性值與
未與版位建立關聯的自訂元素內容 (第三個 Is this text visible?
我們定義名為 star-rating 的自訂元素
方法是擴充 HTMLElement：
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
現在您已定義該元素，每當瀏覽器遇到 #star-rating-template 做為範本的元素。瀏覽器會將陰影 DOM 樹狀結構附加至節點，
將範本內容的副本複製到該 Shadow DOM。
請注意，您可以限制attachShadow()的元素。
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(starRating.cloneNode(true));
如果您查看開發人員工具，您會注意到 中的 是每個自訂元素的陰影根的一部分。
開發人員工具中的每個自訂元素都會有 內容的本機副本，但內容可以顯示在瀏覽器中
的自訂元素不會在畫面上呈現。
在 範例中，我們將範本內容附加至文件內文，並將內容新增至一般 DOM。
在 customElements 定義中，我們使用相同的
appendChild()，但複製的範本內容已附加至
已封裝 shadow DOM。
注意到星星如何重新設定樣式的圓形按鈕？不屬於標準 DOM 而非標準 DOM 的一部分，因此不適用於 Codepen CSS 分頁中的樣式。該分頁的 CSS 樣式的範圍僅限於文件，而非陰影 DOM，因此不會套用樣式。我們必須建立 設定樣式，為已封裝的 Shadow DOM 內容設定樣式。
陰影 DOM
陰影 DOM 會將 CSS 樣式限定在各個陰影樹狀結構中，與文件的其他部分隔離。也就是外部 CSS 並不適用於元件，而且元件樣式不會影響文件的其他部分，除非我們刻意 以及引導使用者前往的內容
由於已將內容附加至 shadow DOM，因此我們可以加入 雖然網頁元件會封裝為 在 shadow DOM 內為文件設定樣式，以及設定 shadow DOM 內容的樣式，但其實不是很簡單
套用全域樣式陰影界線 (即陰影 DOM 結束且一般 DOM 開始) 只能週遊
都是刻意開發的讀者 「陰影樹狀結構」是陰影 DOM 中的 DOM 樹狀結構。陰影根目錄是陰影樹狀結構的根節點。 您必須先編輯範本，才能指定全域範圍內 CSS 的 Shad DOM。 如果範本標記開始如下： 我們可使用以下項目指定 部分名稱的行為與類別相似：一個元素可以包含多個以空格分隔的零件名稱，而多個元素可以
具有相同零件名稱 Google 提供實用的檢查清單，方便您建立自訂元素。你也可以瞭解
關於宣告式陰影 DOM 的新概念。 測試你對範本、版位和陰影的瞭解程度。 根據預設，陰影 DOM 外的樣式會設定內部元素的樣式。 下列何者是
標記，而 CSS 樣式範圍則限定為 shadow DOM，且已隱藏
包括元件外的所有內容、轉譯的版位內容、設定目前範圍外的樣式
:host 虛擬類別會選取 :host()。
這會只會選取與所傳遞參數相符的陰影主機元素，例如類別或屬性選取器。如何選取
所有自訂元素都可以在全域 CSS 中使用 star-rating { /* styles */ }，或在範本樣式中使用 :host(:not(#nonExistantId))。簡單來說
全球 CSS 供應商勝出。::slotted() 虛擬元素跨越陰影 DOM 邊界
在 shadow DOM 的範圍內如果與選取器相符，就會選取運算單元化的元素。在本範例中，::slotted(legend) 符合我們的三個圖例。part
屬性皆可加到您想設定樣式的任何元素中。然後使用 ::part() 虛擬元素
來比對陰影樹狀結構中與所傳遞參數相符的元素。虛擬元素的錨定或原始元素為
主機或自訂元素名稱，在本例中為 star-rating。這個參數是 part 屬性的值。
和 ：star-rating::part(formPart) { /* styles */ }
star-rating::part(fieldsetPart) { /* styles */ }
隨堂測驗
元素的正確說明？