HTML Web Components 自定義標籤

Web Components 是一組網頁原生技術套件，允許開發者建立「可重複使用」且「封裝良好」的自訂標籤。它讓你可以撰寫像 <my-navbar> 這樣自定義名稱的 HTML 元素，而不需要依賴像是 React 或 Vue 這樣的函式庫。

Web Components 的基礎核心包含三大技術：

  1. Custom Elements (自訂元素)
  2. Shadow DOM (影子 DOM)
  3. HTML Templates (HTML 樣板)

在本篇中，我們將專注於 HTML 結構層級的基礎：<template> 與 <slot> 標籤。

<template> 樣板標籤

<template> 是 Web Components 的靈魂。它用來存放「不會立即顯示」但「稍後會被重複使用」的 HTML 內容。

為什麼要用 <template>？

  • 效能卓越：標籤內的圖片、腳本不會在頁面載入時立即執行，只有在被實例化後才會啟動。
  • 純淨內容：瀏覽器會解析內容，但不會將其渲染到 Document Tree 中，也不會對現有的 CSS 造成衝突。

語法範例

<template id="my-card-template">
  <style>
    .card {
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
  <div class="card">
    <h3>標題內容</h3>
    <p>卡片描述文字...</p>
  </div>
</template>

在 JavaScript 中，你可以這樣複製這個樣板：

const template = document.getElementById('my-card-template');
const content = template.content.cloneNode(true);
document.body.appendChild(content);

<slot> 插槽標籤

當我們建立自定義組件時，往往需要從外部「填入」內容，這就是 <slot> 的作用。它像是一個佔位符，告訴組件：「外部提供的內容請放在這裡」。

語法範例

在 Web Component 的樣板內部：

<template id="user-info">
  <div>
    <h2>使用者姓名：<slot name="username">預設姓名</slot></h2>
    <p>簡介：<slot name="bio">這個人很懶，什麼都沒寫。</slot></p>
  </div>
</template>

在 HTML 中使用自定義組件（假設已定義為 <user-profile>）：

<user-profile>
  <span slot="username">王小明</span>
  <span slot="bio">熱愛網頁開發的前端工程師。</span>
</user-profile>

封裝的威力：Shadow DOM

Shadow DOM 讓自定義組件的樣式與結構與外部世界完全隔離。這意味著你在組件內部寫的 CSS，不會影響到網頁的其他部分，反之亦然。這解決了長期以來全域 CSS 命名衝突的問題。

總結

Web Components 讓 HTML 變得更有生命力，不再只是靜態的結構。透過 <template> 隔離樣板，以及 <slot> 靈活投射內容，我們可以在不使用繁重框架的情況下，建構出模組化的網頁組件。

如果你希望深入學習如何撰寫自定義標籤，接下來可以進一步研究 JavaScript 物件導向 中的 Class 語法與 customElements.define() 方法。