釋放 Web 元件和自訂元素的強大功能，實作可重複使用 UI 設計

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);

類別 MyCard 擴充 HTMLElement {
  構造函數（）{
    極好的（）;
    this.attachShadow({ 模式: '開啟' });
  }

  連接回調() {
    this.shadowRoot.innerHTML = `
      
        。卡片 {
          邊框：1px實心#ddd；
          內邊距：20px；
          邊框半徑：5px；
          背景顏色：#f4f4f4；
        }
      風格>
      <div>



<p>這裡，.card 類別的作用域為 my-card 元素的 Shadow DOM，並且不會影響主文檔中的任何其他 .card 類別。 </p>


<hr>

<h3>
  
  
  <strong>HTML 範本：可重複使用的內容</strong>
</h3>

<p><strong>HTML <template></template></strong> 標籤可讓您定義可重複使用的 HTML。 內的內容頁面載入時標籤不會呈現，但可以在需要時複製並插入 DOM 中。 </p>

<p><strong>範例：</strong><br>
</p>

<pre class="brush:php;toolbar:false">



<p>這裡，模板內容在腳本運行時被複製並添加到文件中，提供了一種重複使用部分 UI 的便捷方法。 </p>


<hr>

<h3>
  
  
  <strong>為什麼要使用 Web 元件？ </strong>
</h3>

<ol>
<li>
<strong>可重複使用性</strong>：一旦創建，Web 元件就可以在任何 Web 應用程式或框架中重複使用，而無需擔心相容性。 </li>
<li>
<strong>封裝</strong>：Shadow DOM 確保您的元件與外部樣式和腳本隔離，防止衝突並使其更易於維護。 </li>
<li>
<strong>與框架無關</strong>：Web 元件是基於本機 Web 標準構建，這意味著它們可以跨各種框架（例如 React、Angular、Vue）使用，而不需要額外的依賴項。 </li>
<li>
<strong>互通性</strong>：Web 元件可以與其他 JavaScript 程式碼和函式庫交互，從而實現與現有應用程式的無縫整合。 </li>
<li>
<strong>可自訂</strong>：您可以輕鬆使用特性和屬性自訂 Web 元件，以動態變更其行為和外觀。 </li>
</ol>


<hr>

<h3>
  
  
  <strong>何時使用 Web 元件？ </strong>
</h3>

<p>Web 元件在以下情況下是不錯的選擇：</p>