Web Component 組合應用

今天會將這份 Web Component 分成 HTML 層 → JavaScript 層 → Shadow DOM 層，來一一介紹。

1. HTML 層

<my-counter></my-counter>

my-counter：自訂元素（Custom Element）。
瀏覽器一開始會不認得這個標籤，但因為後面有 customElements.define() 註冊，所以會被解析成一個元件。
而它的功用可以當作是一個**"計數器元件"**。

2. JavaScript 層

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <button>: <span id="num">0</span></button>
    `;
    this.shadowRoot.querySelector("button").addEventListener("click", () => {
      this.count++;
      this.shadowRoot.querySelector("#num").textContent = this.count;
    });
  }
}
customElements.define("my-counter", MyCounter);

class MyCounter extends HTMLElement：建立一個類別，用來定義自訂元素，且繼承 HTMLElement。
constructor()：元件建立時執行初始化。
this.count = 0;：定義計數器初始值。
customElements.define("my-counter", MyCounter)：註冊新元件，讓 my-counter 能被瀏覽器使用。

3. Shadow DOM 層

this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
  <button>: <span id="num">0</span></button>
`;

Shadow DOM：建立一個**"封閉的 DOM 範圍"**，避免元件內部樣式或結構被外部干擾。
mode: "open"：允許外部透過 element.shadowRoot 存取內部 DOM。
button: span id="num"0/span/button
span id="num"0/span 顯示目前數字（初始 0）。

4. 互動邏輯

this.shadowRoot.querySelector("button").addEventListener("click", () => {
  this.count++;
  this.shadowRoot.querySelector("#num").textContent = this.count;
});

綁定按鈕的點擊事件：而每次點擊時 this.count++ → 計數器數字加一。
更新 span id="num" 的內容，顯示最新數字。