Custom Elements 是Web Components 的核心部分，允許開發(fā)者通過HTML、CSS 和JavaScript 原生創(chuàng)建可複用的UI 組件。 1. 創(chuàng)建自定義元素需繼承HTMLElement 並使用customElements.define() 註冊；2. 使用Shadow DOM 實現樣式與結構的封裝隔離；3. 通過生命週期鉤子如connectedCallback、attributeChangedCallback 等響應組件狀態(tài)變化；4. 可通過屬性監(jiān)聽或自定義setter 實現數據傳遞與更新；5. 使用<slot> 插槽機制支持內容插入。整個過程無需依賴任何框架，適合提升組件化開發(fā)能力並減少對框架的依賴。

用HTML 自定義元素構建Web Components，其實就是在不依賴框架的情況下，實現可複用、封裝良好的UI 組件。這事兒聽起來有點“高級”，但做起來並不難，尤其適合想提升組件化開發(fā)能力或者希望減少對框架依賴的人。

什麼是Custom Elements？

Custom Elements 是Web Components 標準的一部分，允許我們創(chuàng)建新的HTML 元素標籤，比如<my-button></my-button>或者<data-card></data-card> 。瀏覽器原生支持，不需要額外庫。

要註冊一個自定義元素，基本做法是使用customElements.define()方法，並繼承HTMLElement類：

 class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<button>Click me</button>`;
  }
}

customElements.define(&#39;my-button&#39;, MyButton);

這樣你就可以在HTML 中直接使用<my-button></my-button> 。簡單來說，就是自己寫個類，然後告訴瀏覽器：“這個標籤我來定義”。

如何添加樣式和行為？

Web Components 的核心優(yōu)勢之一是樣式隔離，這通過Shadow DOM 實現。你可以像寫普通HTML 一樣寫結構和樣式，但不會影響頁面其他部分。

舉個例子，在上面的MyButton類裡，可以這樣加樣式：

 this.shadowRoot.innerHTML = `
  <style>
    button {
      background: #007bff;
      color: white;
      padding: 10px 20px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
    }
  </style>
  <button><slot></slot></button>
`;

• 使用<style>標籤把樣式寫進shadowRoot。
• <slot>可以讓你插入內容，比如<my-button>提交</my-button> 。

如果你需要事件綁定，可以在構造函數或生命週期鉤子中操作：

 this.shadowRoot.querySelector('button').addEventListener('click', () => {
  console.log('按鈕被點擊了');
});

生命週期鉤子怎麼用？

Custom Elements 提供了一些生命週期回調方法，類似React 的useEffect 或Vue 的mounted：

• connectedCallback ：元素插入頁面時觸發(fā)
• disconnectedCallback ：元素移除時觸發(fā)
• attributeChangedCallback(attrName, oldVal, newVal) ：屬性變化時觸發(fā)
• observedAttributes ：聲明哪些屬性會觸發(fā)attributeChangedCallback

舉個例子，假設你想監(jiān)聽一個叫disabled的屬性：

 static get observedAttributes() {
  return ['disabled'];
}

attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'disabled') {
    const button = this.shadowRoot.querySelector('button');
    button.disabled = newValue !== null;
  }
}

這樣當用戶設置<my-button disabled>按鈕</my-button>時，內部按鈕也會禁用。

怎麼傳數據進來？

除了屬性，你還可以通過屬性反射（reflect）或者自定義setter 來傳遞數據。例如，給組件添加一個label屬性：

 set label(value) {
  this._label = value;
  this.shadowRoot.querySelector('button').textContent = value;
}

get label() {
  return this._label;
}

使用的時候可以這樣：

 <my-button id="btn">默認文本</my-button>
<script>
  document.getElementById(&#39;btn&#39;).label = &#39;新按鈕文字&#39;;
</script>

這種方式比純靠attribute 更靈活，也更適合複雜數據類型。

基本上就這些。 Custom Elements 不復雜，但容易忽略細節(jié)，比如生命週期的調用時機、shadowRoot 的管理、以及如何與外部通信。掌握好這些，你就能寫出真正獨立、易維護的組件了。

以上是使用HTML自定義元素構建Web組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！