🔰implementing components

browser ⟩ web components ⟩ implement

💈範例

• web component (0.0.1)(Gemini)：初步教學範例

👥 相關

• custom element - associate a JS classwith an HTML tag name.

• shadow DOM - encapsulation.

• <template> - <template>

📗 參考

• JavaScript: The Definitive Guide (15.6 Web Components)

1️⃣ 定義繼承自 HTMLElement 的 class

首先，你需要定義一個 JavaScript class，這個類別繼承自 HTMLElement。這個類別將定義你的 Web Component 的行為。

// ⭐️ 1️⃣ 定義一個繼承自 HTMLElement 的 class
class MyComponent extends HTMLElement {
  constructor() {
  
    // ⭐️ 呼叫父類別的 constructor
    super(); 

    // 在這裡初始化你的 component
  }
}

2️⃣ 建立 Shadow DOM

Shadow DOM 允許你為你的 Web Component 創建一個封裝的 DOM 樹。這意味著 component 內部的樣式和腳本不會影響到頁面的其他部分，反之亦然。

constructor() {

  super();

  // ⭐️ 2️⃣ 建立 shadow DOM
  //   mode: 
  //   - 'open'  : 允許 JS 從外部訪問 shadow DOM
  //   - 'closed': 不允許
  this.attachShadow({ mode: 'open' }); 
}

3️⃣ 建立樣板（Template）

你可以使用 <template> 元素來定義你的 Web Component 的 HTML 結構。這樣做的好處是可以避免直接操作 DOM，提高效能。

<!-- ⭐️ 3️⃣ 建立樣板 -->
<template id="my-component-template">

  <style>
    /* component 的樣式 */
    .container {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
  
  <div class="container">
    <h1>Hello from My Component!</h1>
    <p>
      <!-- <slot> 是一個 placeholder，允許使用者在 component 標籤內插入內容 -->
      <slot></slot>
    </p>  
  </div>
  
</template>

4️⃣ 將樣板加入 Shadow DOM

在你的 component 類別中，使用 JavaScript 將樣板的內容複製到 Shadow DOM 中：

constructor() {
  super();
  this.attachShadow({ mode: 'open' });

  // ⭐️ 4️⃣ append template content to shadow root
  const template = document.getElementById('my-component-template');
  this.shadowRoot.appendChild(template.content.cloneNode(true));
}

或者也可以直接將 3️⃣ 4️⃣ 兩個步驟濃縮成這樣：

// in constructor()
// ⭐️ 4️⃣ append template content to shadow root
this.shadowRoot.innerHTML = `
    <style> ... </style>
    <div class="container"> ... </div>
`;

5️⃣ 註冊 Component

使用 customElements.define() 註冊 Web Component：

• ⭐ 注意：component 的標籤名稱必須包含一個連字號 "-"❗

// ⭐️ 5️⃣ 註冊 Component       ╭──tag name──╮  ╭─ class ─╮
window.customElements.define('my-component', MyComponent);