Web Component 組合應用

1.HTML 層

<h1>Hello </h1>
<x-hello name="Min"></x-hello>

x-hello 是自定義的元素（Custom Element），HTML 只負責宣告**"我要用一個 hello 元件"，但不包含邏輯與樣式。
name="Min" 屬性只是傳遞資料，並不決定它如何顯示。
整體要注意的地方是 HTML 層需要專注於"結構"與"語意"**。

2.JavaScript 層

class XHello extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode:'open'});
  }
  connectedCallback() {
    const name = this.getAttribute('name') || '訪客';
    this.shadowRoot.innerHTML = `...`;
  }
}
customElements.define('x-hello', XHello);

我們用 class XHello extends HTMLElement 自定義元件。
connectedCallback() 會在元素被插入 DOM 時執行：讀取 name 屬性，決定要顯示的內容。
customElements.define('x-hello', XHello) 註冊元件，讓 x-hello 可以在 HTML 中使用。
這邊需要注意的是 JavaScript 層負責元件的**"行為"與"資料邏輯"**，但不直接影響外部 HTML。

3.Shadow DOM 層

<style>
  div {
    padding: 10px 16px;
    border-radius: 8px;
    background: #f0f0ff;
    color: #333;
    font-weight: bold;
  }
</style>
<div>hello，min</div>

this.attachShadow({mode:'open'}) 建立 Shadow DOM，確保元件的樣式與結構被封裝。
而且這裡的 style 只會影響 x-hello 內部，部會特別影響到全域樣式。
然後 div 的文字內容由 JavaScript 插入（但需要根據 name 屬性決定）。
需要注意的地方有 Shadow DOM 層是提供**"封裝"與"隔離"**，確保元件可重用且不會被外部干擾。