Web 元件與自訂元素：建立可重複使用 UI 元素的指南

Web 元件和自訂元素代表了建立模組化、可重複使用元件的強(qiáng)大方法，這些元件可以在不同的 Web 應(yīng)用程式、框架和瀏覽器之間無(wú)縫運(yùn)作。透過(guò)利用 Web 元件，開發(fā)人員可以使用自己的行為和樣式建立封裝的 UI 元素，而不必?fù)?dān)心與應(yīng)用程式的其他部分發(fā)生衝突。讓我們探討什麼是 Web 元件和自訂元素、它們?nèi)绾芜\(yùn)作以及為什麼您應(yīng)該考慮使用它們。

什麼是 Web 元件？

Web 元件是一組 Web 平臺(tái) API，可讓您建立具有自己的功能和樣式的自訂 HTML 元素。它們由四項(xiàng)主要技術(shù)組成：

1. 自訂元素：定義您自己的 HTML 標(biāo)籤。
2. Shadow DOM：為元素的結(jié)構(gòu)和樣式提供封裝。
3. HTML 範(fàn)本：定義可與自訂元素一起使用的可重複使用 HTML 區(qū)塊。
4. ES 模組：允許您將 JavaScript 功能匯入 Web 元件。

這些技術(shù)的結(jié)合使開發(fā)人員能夠創(chuàng)建完全封裝的自訂、可重複使用的 UI 元素，確保 CSS 或 JavaScript 不會(huì)與應(yīng)用程式的其他部分發(fā)生衝突。

自訂元素：Web 元件的核心

自訂元素可讓您使用自訂功能定義自己的 HTML 元素。一旦定義，這些自訂元素就可以像任何其他 HTML 標(biāo)籤一樣使用。

建立自訂元素

1. 定義元素類別：建立一個(gè)擴(kuò)充 HTMLElement 類別的 JavaScript 類別。
2. 定義元素行為：使用connectedCallback、disconnectedCallback和attributeChangedCallback等生命週期方法來(lái)定義元素的行為。

範(fàn)例：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // Create Shadow DOM
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background-color: blue;
          color: white;
          font-size: 16px;
        }
      </style>
      <button>Click Me</button>
    `;
  }
}

// Define the custom element
customElements.define('my-button', MyButton);

現(xiàn)在，您可以使用標(biāo)記 HTML 中的任意位置，就像常規(guī) HTML 元素一樣。

Shadow DOM：Web 元件中的封裝

Shadow DOM 允許 Web 元件擁有獨(dú)立於主文件的獨(dú)立 DOM 樹。這確保了元件中的樣式和腳本是隔離的，防止與文件中執(zhí)行的全域樣式或 JavaScript 發(fā)生衝突。

• 封裝：元件Shadow DOM內(nèi)的樣式和DOM結(jié)構(gòu)是隔離的，不會(huì)受到外部樣式或腳本的影響。
• 範(fàn)圍：您可以編寫特定於組件的樣式，而不必?fù)?dān)心它們會(huì)影響組件之外的其他元素。

Shadow DOM 的實(shí)際範(fàn)例：

類別 MyCard 擴(kuò)充 HTMLElement {
  構(gòu)造函數(shù)（）{
    極好的（）;
    this.attachShadow({ 模式: '開啟' });
  }

  連接回調(diào)() {
    this.shadowRoot.innerHTML = `
      
        ?？ㄆ?{
          邊框：1px實(shí)心#ddd；
          內(nèi)邊距：20px；
          邊框半徑：5px；
          背景顏色：#f4f4f4；
        }
      風(fēng)格>
      <div>



<p>這裡，.card 類別的作用域?yàn)?my-card 元素的 Shadow DOM，並且不會(huì)影響主文檔中的任何其他 .card 類別。 </p>


<hr>

<h3>
  
  
  <strong>HTML 範(fàn)本：可重複使用的內(nèi)容</strong>
</h3>

<p><strong>HTML <template></template></strong> 標(biāo)籤可讓您定義可重複使用的 HTML。 內(nèi)的內(nèi)容頁(yè)面載入時(shí)標(biāo)籤不會(huì)呈現(xiàn)，但可以在需要時(shí)複製並插入 DOM 中。 </p>

<p><strong>範(fàn)例：</strong><br>
</p>

<pre class="brush:php;toolbar:false">



<p>這裡，模板內(nèi)容在腳本運(yùn)行時(shí)被複製並添加到文件中，提供了一種重複使用部分 UI 的便捷方法。 </p>


<hr>

<h3>
  
  
  <strong>為什麼要使用 Web 元件？ </strong>
</h3>

<ol>
<li>
<strong>可重複使用性</strong>：一旦創(chuàng)建，Web 元件就可以在任何 Web 應(yīng)用程式或框架中重複使用，而無(wú)需擔(dān)心相容性。 </li>
<li>
<strong>封裝</strong>：Shadow DOM 確保您的元件與外部樣式和腳本隔離，防止衝突並使其更易於維護(hù)。 </li>
<li>
<strong>與框架無(wú)關(guān)</strong>：Web 元件是基於本機(jī) Web 標(biāo)準(zhǔn)構(gòu)建，這意味著它們可以跨各種框架（例如 React、Angular、Vue）使用，而不需要額外的依賴項(xiàng)。 </li>
<li>
<strong>互通性</strong>：Web 元件可以與其他 JavaScript 程式碼和函式庫(kù)交互，從而實(shí)現(xiàn)與現(xiàn)有應(yīng)用程式的無(wú)縫整合。 </li>
<li>
<strong>可自訂</strong>：您可以輕鬆使用特性和屬性自訂 Web 元件，以動(dòng)態(tài)變更其行為和外觀。 </li>
</ol>


<hr>

<h3>
  
  
  <strong>何時(shí)使用 Web 元件？ </strong>
</h3>

<p>Web 元件在以下情況下是不錯(cuò)的選擇：</p>

• 您想要建立可在不同專案或框架中使用的可重複使用 UI 元素。
• 您需要建立需要封裝的自訂小工具或互動(dòng)式 UI 元素。
• 您想要與可能不支援特定自訂元素解決方案的框架和程式庫(kù)整合。
• 您想要開發(fā)在不同瀏覽器和框架之間一致工作的跨平臺(tái)元件。

結(jié)論

Web 元件和自訂元素允許開發(fā)人員建立可重複使用、封裝的 UI 元件，這些元件與框架無(wú)關(guān)並且與任何現(xiàn)代 Web 應(yīng)用程式相容。透過(guò)利用 Shadow DOM 和 HTML 模板等技術(shù)，您可以建立模組化、可維護(hù)的程式碼，從而提高 Web 應(yīng)用程式的可擴(kuò)充性和靈活性。無(wú)論您是建立新專案還是將元件整合到現(xiàn)有專案中，Web 元件都為現(xiàn)代 Web 開發(fā)提供了強(qiáng)大的工具。

？ 您在專案中使用過(guò) Web 元件或自訂元素嗎？在評(píng)論中分享您的經(jīng)驗(yàn)或提出問(wèn)題！