Web 元件：簡介

在現代 Web 開發中，框架風靡一時。幾乎所有現代框架都有組件的概念。 元件背後的想法是將前端邏輯分解為更小的可重複使用區塊，您可以跨頁面或專案共享這些區塊。 一般來說，這些元件不能在其他框架中重複使用，並且需要一個建置過程來將它們編譯為可以在瀏覽器中執行的 JavaScript。

如果我告訴你有一種方法可以使用普通 JavaScript 和廣泛可用的瀏覽器 API 來建立元件，並且可以跨框架共享，你會怎麼想？ 現在，這已成為 Web 元件的現實。在這裡，我們將快速瀏覽不同類型的 Web 元件，以及我們可以使用它們的一些功能。

Web 元件的基礎知識

Web 元件是使用自訂元素登錄定義的。這是大多數現代瀏覽器提供的 API。要建立 Web 元件，您只需在程式碼中定義它，然後將其註冊到自訂元素註冊表中。使用正確的命名約定註冊和定義後，該元件就可以在頁面中使用。

customElements.define("my-component", MyComponentClass);

Web 元件的類型

Web 元件可以分為兩個不同的類別。它們是自主 Web 元件 和 自訂內建元素。

自治 Web 元件 是通用 HTMLElement 類別的擴充。這些元件通常更加靈活，因為您實際上正在建立自己的 HTML 元素，並且能夠從頭開始自訂所有行為。這包括用於渲染組件的根元素。 定義後，您可以像使用任何其他 HTML 元素一樣使用自治 Web 元件。

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>
</my-button></p>

<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button></my-button>
<your-button></your-button>

<!--Invalid-->
<my-button></my-button>

<mybutton></mybutton>

生命週期掛鉤

Web 元件具有特定的生命週期掛鉤，用於對元件經歷的不同階段做出反應。 鉤子如下：

• connectedCallback ->當元件附加到 DOM 時運行。
• disconnectedCallback ->當元件與 DOM 分離時運作。
• 採用回呼 ->每次元件附加到新 DOM 時執行。
• attributeChangedCallback ->當「observedAttributes」清單中的屬性更新時執行。

class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}

這些生命週期鉤子用於執行建立/銷毀元件實例時所需的任何初始化或清理工作。 attributeChangedCallback 特別有用，因為它允許對屬性值更新做出反應。 Web 元件有一個特殊的靜態屬性，稱為“observedAttributes”，它是一個屬性名稱（字串）數組，將觸發 attributeChangedCallback。

無障礙

可訪問性是當今任何 Web 開發中的重要考慮因素。當涉及到 Web 元件時，您可以像在常規 HTML 或框架中一樣使用 A​​RIA 屬性，但一般來說，您將繼承所使用的 HTML 元素的內建角色和輔助功能。

所有相同的準則都適用於這裡和其他地方。例如，確保在建立元件時使用語義 HTML，添加可能需要的任何必要的鍵盤處理，並確保正確管理焦點和顏色對比度等內容。

影子 DOM

Shadow DOM 可能是 Web 元件中最令人困惑和爭議的部分。 Shadow DOM 本質上是 DOM 的一個單獨作用域的部分，位於 Web 元件

Shadow DOM 主要是自治 Web 元件所關心的問題，因為自訂內建元素只是添加到現有的 HTML 元素中。 對於自治 Web 元件，表示元素的自訂標籤（即 ）被視為「主機」元素。宿主元素內是「影子根」。陰影根內是渲染元件標記的位置。

這是一個範例，您將看到「my-button」元素作為宿主，其中包含 Shadow DOM。

建置 Web 元件時，可以將 Shadow DOM 設定為兩種模式。這些模式是“開放”和“封閉”。開放的 Shadow DOM 可以在 Light DOM 的 Shadow Root 之外使用 JavaScript 訪問，而封閉的 Shadow DOM 則不能。

customElements.define("my-component", MyComponentClass);

您在 Shadow DOM 中定義的任何樣式都在 Shadow DOM 範圍內，並且不會污染文件的其餘部分。 「Light DOM」（文件的其餘部分）中定義的任何樣式都不會穿透 Shadow DOM（CSS 變數是例外，但我們不會在這裡討論）。 現代瀏覽器確實提供了使用 CSS 使用零件直接從 Light DOM 定位 Shadow DOM 的方法。 您可以透過在標記中新增零件屬性來將零件新增至元件的 Shadow DOM。 然後可以使用 ::part 偽選擇器在 CSS 中定位這些部分。 這非常方便，但本質上它非常有限。 您不能將子選擇器與 ::part 選擇器連結。您只能定位 Shadow DOM 中具有「part」屬性的特定元素。

使用 Shadow DOM 時，可訪問性也是一個重要的考慮因素。如果您曾經使用過 ARIA 屬性，那麼您就會熟悉“aria-scribedby”和“aria-labelledby”，它們通常會被賦予一個 ID，該 ID 引用另一個包含螢幕閱讀器內容標籤或描述的元素。 Shadow DOM 與樣式類似，將 ID 的作用域分開，因此您無法從 Light DOM 引用位於 Shadow DOM 內的 ID，反之亦然。 當嘗試提供需要動態提供的詳細描述時，這可能會帶來挑戰，但存在解決方法，我們不會在本介紹中深入探討。

模板和插槽

模板和插槽是可以與 Shadow DOM 結合使用來增強 Web 元件的工具。模板用於在 Web 元件中建立可重複使用的片段，而插槽用於暴露可以傳遞來自 Light DOM 的內容的「洞」。

如果您需要在 Web 元件中重複渲染一段 HTML 片段，那麼模板會很方便。它們也可以在 Web 元件之外使用，但用例更有限。它們是使用“模板”標籤實現的。

槽用於將內容從 Light DOM 傳遞到 Web 元件，並使用「槽」標籤實作。如果您有一個可能需要傳入動態內容的通用元件，這會很方便。一個很好的例子可能是通用卡組件，您可以在其中公開一個插槽以將標記傳遞到卡的主體。 插槽具有“名稱”屬性，您可以提供該屬性來唯一標識插槽。如果您需要將多個插槽放入 Web 元件中，這會很方便。傳遞內容時，您只需傳遞一個值為 slot="your-slot-name" 的屬性，內容就會傳遞到具有符合名稱的插槽。

插槽和 Shadow DOM 有一個值得注意的獨特互動。 插槽可以具有在沒有任何內容傳入的情況下呈現的預設內容。傳遞到插槽的內容位於 Light DOM 中，並被「淺複製」到 Shadow DOM 中。 您可以在瀏覽器檢查器中直觀地看到這一點。槽內容將在 Web 元件內呈現，但在 DOM 中，技術上內容位於 Web 元件外部並提供槽的連結。

話雖如此，這意味著所有插槽內容的樣式和引用就像 Light DOM 中的任何其他內容一樣。 Light DOM 中的樣式會影響槽內容，而 Shadow DOM 樣式則不會。 有一些 API 可用於與 Web 元件中的槽內容進行互動。

Web 元件支援

現代瀏覽器對 Web 元件的支援相當好。主要的例外是 Safari，它不支援自訂內建元素。 如果您需要支援 Internet Explorer 11 等舊版瀏覽器，則必須填入一些內容。

基本範例

現在我們已經簡要介紹了所有基本概念，讓我們來看一些範例。

自主自訂元素

這是一個名為「my-button」的自主自訂元素範例：

customElements.define("my-component", MyComponentClass);

首先要注意的是程式碼大部分是相同的。最大的區別是我們直接擴展了 HTMLButtonElement，然後我們在定義自訂元素的時候也聲明了我們擴展了按鈕。

我們也花更少的時間編寫渲染元素的程式碼。由於我們正在擴展 HTMLButtonElement，因此該元件只是一個具有額外功能的 HTML 按鈕。 我們將使用 HTML“is”屬性告訴 HTML 按鈕它是“my-button”。

這是現場範例：

您會再次注意到我們使用「is」屬性來增強現有的 HTML 按鈕元素。 您還會注意到，就像使用自治自訂元素一樣，我們可以附加事件偵聽器並使用按鈕，就像處理任何其他HTML 元素一樣，無論如何，這裡更有意義，因為它實際上只是一個擴充的HTML 按鈕。

總結

Web 元件是解決建立可在不同頁面和項目之間重複使用的可共用元件問題的普通方法。它們的工作方式更像普通的 HTML 元素，這可能會造成一些混亂，但最終它們非常有用，有助於解決現代框架所針對的許多相同問題。

在這裡，我們對 Web 元件、圍繞它們的不同概念進行了非常介紹性的研究，並透過一些快速範例展示了它們的基本功能。 從這裡開始，我們可以開始更深入地研究如何使建造和使用它們變得更容易，並研究如何處理它們的一些痛點。

如果您有興趣，請隨時查看 GitHub 中的範例，也可以在 Code Pen 中使用它們。

• 自治自訂元素範例
• 自訂內建元素範例
• 額外的基本範本範例！

在下一篇文章中，我們將了解如何擴展使用模板和槽，以及如何使渲染變得更容易。 請繼續關注！

以上是Web 元件：簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！