Web 組件和自定義元素：構(gòu)建可重用 UI 元素的指南

Web 組件和自定義元素代表了構(gòu)建模塊化、可重用組件的強(qiáng)大方法，這些組件可以在不同的 Web 應(yīng)用程序、框架和瀏覽器之間無(wú)縫工作。通過(guò)利用 Web 組件，開(kāi)發(fā)人員可以使用自己的行為和樣式創(chuàng)建封裝的 UI 元素，而不必?fù)?dān)心與應(yīng)用程序的其他部分發(fā)生沖突。讓我們探討什么是 Web 組件和自定義元素、它們?nèi)绾喂ぷ饕约盀槭裁茨鷳?yīng)該考慮使用它們。

什么是 Web 組件？

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

1. 自定義元素：定義您自己的 HTML 標(biāo)簽。
2. Shadow DOM：為元素的結(jié)構(gòu)和樣式提供封裝。
3. HTML 模板：定義可與自定義元素一起使用的可重用 HTML 塊。
4. ES 模塊：允許您將 JavaScript 功能導(dǎo)入到 Web 組件中。

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

自定義元素：Web 組件的核心

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

創(chuàng)建自定義元素

1. 定義元素類：創(chuàng)建一個(gè)擴(kuò)展 HTMLElement 類的 JavaScript 類。
2. 定義元素行為：使用connectedCallback、disconnectedCallback和attributeChangedCallback等生命周期方法來(lái)定義元素的行為方式。

示例：

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 樹(shù)。這確保了組件中的樣式和腳本是隔離的，防止與文檔中運(yùn)行的全局樣式或 JavaScript 發(fā)生沖突。

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

Shadow DOM 的實(shí)際示例：

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

  連接回調(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èi)容</strong>
</h3>

<p><strong>HTML <template></template></strong> 標(biāo)簽允許您定義可重復(fù)使用的 HTML。 內(nèi)的內(nèi)容頁(yè)面加載時(shí)標(biāo)簽不會(huì)呈現(xiàn)，但可以在需要時(shí)克隆并插入到 DOM 中。</p>

<p><strong>示例：</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 組件在以下情況下是一個(gè)不錯(cuò)的選擇：</p>

• 您想要構(gòu)建可在不同項(xiàng)目或框架中使用的可重用 UI 元素。
• 您需要?jiǎng)?chuàng)建需要封裝的自定義小部件或交互式 UI 元素。
• 您想要與可能不支持特定自定義元素解決方案的框架和庫(kù)集成。
• 您想要開(kāi)發(fā)在不同瀏覽器和框架之間一致工作的跨平臺(tái)組件。

結(jié)論

Web 組件和自定義元素允許開(kāi)發(fā)人員構(gòu)建可重用、封裝的 UI 組件，這些組件與框架無(wú)關(guān)并且與任何現(xiàn)代 Web 應(yīng)用程序兼容。通過(guò)利用 Shadow DOM 和 HTML 模板等技術(shù)，您可以創(chuàng)建模塊化、可維護(hù)的代碼，從而提高 Web 應(yīng)用程序的可擴(kuò)展性和靈活性。無(wú)論您是構(gòu)建新項(xiàng)目還是將組件集成到現(xiàn)有項(xiàng)目中，Web 組件都為現(xiàn)代 Web 開(kāi)發(fā)提供了強(qiáng)大的工具。

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