探索Web Components

Amd794發表於2024-06-16
Web

title: 探索Web Components
date: 2024/6/16
updated: 2024/6/16
author: cmdragon

excerpt:
這篇文章介紹了Web Components技術，它允許開發者建立可複用、封裝良好的自定義HTML元素，並直接在瀏覽器中執行，無需依賴外部庫。透過組合HTML模板、Shadow DOM、自定義元素和HTML imports，Web Components增強了原生DOM的功能，提高了元件化開發的封裝性和可維護性，同時支援元件的生命週期管理和高階設計模式，有利於提升網頁應用的效能和開發效率。

categories:

  • 前端開發

tags:

  • Web Components
  • 原生DOM
  • 封裝性
  • 元件化
  • 生命週期
  • 高階設計
  • 效能最佳化

image

image

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

第1章：引言

Web Components的起源與發展

Web Components是一種基於Web標準的新興技術，旨在解決Web應用程式開發中的可重用元件化問題。Web
Components的核心思想是，將HTML、CSS和JavaScript結合起來，實現可重用、可組合和可封裝的元件。

Web Components的起源可以追溯到2011年，由W3C（全球資訊網聯盟）提出的一個名為Web Components Specifications（Web
Components規範）的專案。該專案包括四個主要模組：

  1. Templates and Slots（模板和插槽）：提供一種在HTML中宣告模板的方式，並在元件中使用插槽來實現內容分發。
  2. Shadow DOM（影子DOM）：提供一種在元件內部建立獨立的DOM樹，與外部DOM樹隔離開來，實現樣式和內容的封裝。
  3. Custom Elements（自定義元素）：提供一種在HTML中定義和註冊新元素的方式，擴充套件HTML標準元素集。
  4. Decorators（裝飾器）：提供一種在元件生命週期中新增額外功能的方式，如屬性觀察器、事件監聽器和生命週期回撥。

為什麼選擇Web Components

Web Components具有以下優點：

  • 可重用性：元件可以在不同的專案中重用，提高開發效率和一致性。
  • 可組合性：元件可以巢狀和組合，構建更加複雜的UI。
  • 可封裝性：元件可以在內部實現細節上進行隔離，提高可維護性和可測試性。
  • 與現有Web技術的相容性：Web Components基於Web標準，與HTML、CSS和JavaScript高度相容。

第2章：基礎知識

Web Components概述

Web Components是一系列不同的技術，允許你建立可重用的自定義元素，並且包含了自定義的樣式和行為。這些自定義元素可以像標準HTML元素一樣使用，並且可以在任何地方重用。Web
Components主要由以下三個技術組成：

  1. Custom Elements（自定義元素）：允許你定義新的HTML元素，這些元素可以包含自己的HTML結構、CSS樣式和JavaScript行為。
  2. Shadow DOM（影子DOM）：提供了一種封裝方式，使得自定義元素可以擁有自己的DOM樹，與頁面的其他部分隔離開來，防止樣式衝突。
  3. HTML Templates（HTML模板）：提供了一種宣告性的方式來定義HTML結構，可以在執行時插入到文件中。
  4. HTML Imports（HTML匯入）：允許你匯入HTML文件作為模組，雖然這個特性已經被廢棄，但它的理念被其他模組化方案所繼承。

HTML、CSS和JavaScript基礎知識

在深入Web Components之前，你需要具備一定的HTML、CSS和JavaScript基礎知識。以下是這些技術的簡要概述：

  • HTML：超文字標記語言，用於建立網頁的結構和內容。
  • CSS：層疊樣式表，用於設定網頁元素的樣式，如顏色、字型和佈局。
  • JavaScript：一種程式語言，用於實現網頁的互動性和動態內容。

Shadow DOM和模板模式

Shadow DOM：

Shadow DOM是Web
Components的核心技術之一，它允許你將一個隱藏的、獨立的DOM樹附加到一個元素上。這個DOM樹被稱為“影子DOM”，它與主DOM樹（即頁面上的其他元素）是隔離的。這意味著影子DOM內的樣式和行為不會影響到頁面上的其他元素，反之亦然。這種隔離性使得Web
Components能夠封裝自己的樣式和行為，而不必擔心與其他元素的衝突。

模板模式：

模板模式是Web
Components中用於建立自定義元素的一種方式。它允許你定義一個HTML模板，這個模板包含了自定義元素的HTML結構。然後，你可以使用JavaScript來例項化這個模板，並將其附加到DOM中。模板模式通常與Shadow
DOM結合使用，以實現自定義元素的封裝和樣式隔離。

透過結合使用Shadow DOM和模板模式，你可以建立出功能強大、可重用的Web Components，這些元件可以在不同的專案中重複使用，並且能夠保持自己的樣式和行為。

第3章：基礎元件開發

template元素和slot的使用

template元素在Web Components中扮演了重要角色，它允許你定義元件的結構和內容。template
標籤內可以包含HTML結構，這些結構會被複制到每個元件例項中。slot
元素則用於定義元件內部可以接收內容的地方，外部可以將內容插入到這些slot中，實現了元件的可擴充套件性。標準中文電碼查詢 | 一個覆蓋廣泛主題工具的高效線上平臺 (cmdragon.cn)

例如：

<template>
  <div>
    <slot name="header">Default Header</slot>
    <p>Content goes here</p>
    <slot name="footer">Default Footer</slot>
  </div>
</template>

在這個例子中，header和footer是slot，外部可以傳遞自定義內容替換它們。

custom-element定義與註冊

custom-element是Web Components的核心，用於建立自定義的HTML元素。定義一個custom-element通常需要以下步驟：

  1. 使用<custom-element>標籤定義元素：

    <custom-element name="my-component"></custom-element>

  2. 實現connectedCallback和可能的其他生命週期方法，如disconnectedCallback、attributeChangedCallback等：

    class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    // 在這裡新增元件的初始化程式碼
  }

  // 其他生命週期方法...
}

customElements.define("my-component", MyComponent);

  3. 在connectedCallback中，將自定義元素的shadowRoot（暗影根）新增到模板中：

    connectedCallback() {
  this.shadowRoot.appendChild(this.templateContent);
}

// 假設templateContent是template元素的內容
const templateContent = document.querySelector('template');

style和link元素在元件中的應用

style元素用於定義元件的樣式，通常放在<custom-element>標籤內部，或作為<style>標籤的外部連結（<link rel="stylesheet">
）。外部樣式可以透過import匯入到元件內部，這樣可以保持樣式和元件的封裝。

<!-- 內部樣式 -->
<style>
  /* ... */
</style>

<!-- 外部連結 -->
<link rel="stylesheet" href="styles.css">

在元件內部，可以使用this.shadowRoot來訪問和操作樣式。例如，新增樣式到元件的暗影根：

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.shadowRoot.appendChild(this.styleElement);
  }

  // ...
  constructor() {
    super();
    this.styleElement = document.createElement('style');
    this.styleElement.textContent = `
      /* ... */
    `;
  }
}

這樣，外部樣式可以影響到元件的渲染，同時保持了元件的封裝性。

第4章：原生元件與Web Components的對比

原生DOM元素的特性

原生DOM元素是HTML5中直接提供的，它們具有以下特性：

  1. 簡單易用：直接操作DOM元素，API直觀，易於學習和使用。
  2. 廣泛支援：所有現代瀏覽器都內建了對DOM的支援。
  3. 效能：對於簡單的操作，DOM操作通常很快，但複雜操作可能導致效能問題，特別是當涉及到大量元素時。
  4. 事件處理：DOM提供了豐富的事件模型，可以直接監聽和響應元素的事件。
  5. 樣式控制：可以直接透過style屬性或者CSS類來控制元素的樣式。

Web Components的優勢和侷限性

優勢：

  • 封裝性：Web Components提供了一種將HTML、CSS和JavaScript封裝在一起的方式，提高了程式碼的複用性和維護性。
  • 元件化：元件可以獨立於頁面，可以被多個頁面複用，減少了程式碼冗餘。
  • 自定義元素：可以建立自定義的HTML元素，擴充套件HTML元素庫。
  • 資料繫結：透過<template>和<slot>，可以實現資料驅動的元件結構。

侷限性：

  • 學習曲線：Web Components的API和概念可能對初學者來說較難理解和掌握。
  • 瀏覽器支援：雖然大部分現代瀏覽器支援，但一些舊版本瀏覽器可能不支援，需要使用polyfills或polymer庫來彌補。
  • 效能：對於複雜的元件，如果處理不當，可能會有效能問題，尤其是在處理大量資料時。
  • 工具鏈：雖然有工具如Web Components Workbox等來最佳化，但整體工具鏈相比React、Vue等庫可能不夠成熟。

相容性問題與解決方案

  • 瀏覽器相容性：使用@webcomponents/webcomponentsjs庫或者polyfills（如custom-elements-es5-adapter
    ）來提供向後相容性，確保在不支援Web Components的瀏覽器中執行。
  • polyfills：對於一些新特性（如Shadow DOM、HTML Templates等），可以使用polyfills來提供支援。
  • Babel和TypeScript：使用這些工具可以將新特性轉換為舊版本瀏覽器可以理解的程式碼。
  • 測試：確保在各種瀏覽器和版本上進行充分的測試，確保元件的相容性。

總的來說，Web Components提供了一種更現代、更模組化的開發方式，但開發者需要在相容性、學習成本和工具成熟度之間權衡。

第5章：自定義元素API

自定義元素API：生命週期方法

在Web Components中，自定義元素有以下幾個關鍵的生命週期方法：

  1. createdCallback: 當元素被建立（但可能尚未插入到文件中）時呼叫。這是初始化元素內部狀態和處理資料的好時機。
class MyCustomElement extends HTMLElement {
  createdCallback() {
    // 初始化元素內部狀態
  }
}
  1. attachedCallback: 當元素被插入到文件中時呼叫。這時可以繫結事件和處理DOM操作。
attachedCallback() {
  this.addEventListener('click', this.handleClick);
}
  1. detachedCallback: 當元素從文件中移除時呼叫，可以在這裡清理資源。
  2. attributeChangedCallback: 當元素的屬性被修改時呼叫，可以更新內部狀態。
attributeChangedCallback(name, oldValue, newValue) {
  // 更新屬性值
}
  1. connectedCallback: 在元素被連線到DOM樹中（可能是透過<slot>插入）時呼叫。

屬性繫結和事件處理

  • 屬性繫結：可以使用<template>元素的<slot>和<slot-scope>來實現資料繫結，或者使用this.set方法來設定和監聽屬性。
this.set('myProperty', newValue);
  • 事件處理：透過addEventListener方法新增事件監聽器，事件處理函式通常在this上下文中。
addEventListener('click', (event) => {
  // 處理點選事件
});

與外部資料互動

  • 資料繫結：可以使用<template>和<slot>來繫結外部資料，或者透過@property裝飾器宣告響應式屬性。
@property({ type: String, reflect: true })
myData;
  • 事件通訊：自定義元素可以透過customEvent來觸發自定義事件，外部可以透過addEventListener監聽這些事件。
this.dispatchEvent(new CustomEvent('myCustomEvent', { detail: data }));
  • 資料互動API：使用fetch、XMLHttpRequest或Web API（如localStorage、IndexedDB）來獲取和儲存資料。

第6章：高階元件設計

高階元件（Higher-Order Components, HOCs）

高階元件（HOCs）是React中用於重用元件邏輯的高階技術。HOC是一個函式，它接受一個元件並返回一個新的元件。HOC可以用來封裝元件，使其更易於重用和測試。

示例程式碼：

import React from 'react';

// 定義一個HOC
function withSubscription(WrappedComponent, selectData) {
  // ...並返回一個新元件...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ...那資料來源...並訂閱變化...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ...並將新的資料傳遞給被包裝的元件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  }
}

整合狀態管理（如Redux或Vue.js）

狀態管理庫（如Redux）可以幫助管理大型應用程式的狀態，使其更易於維護和測試。Redux是一個可預測的狀態容器，用於JavaScript應用。

示例程式碼：

import { createStore } from 'redux';

// 建立一個reducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text]);
    default:
      return state;
  }
}

// 建立store
let store = createStore(todos);

// 新增一個todo
store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
});

// 列印state
console.log(store.getState());

使用Shadow DOM實現封裝和樣式隔離

Shadow DOM提供了一種封裝Web元件的方式，可以隔離樣式和行為，防止與其他元件衝突。

示例程式碼：

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 建立一個shadow root
    this.attachShadow({ mode: 'open' });
    // 新增一些內容
    this.shadowRoot.innerHTML = `<h1>Hello, World!</h1>`;
  }
}

// 定義custom element
customElements.define('my-element', MyElement);

透過以上方法，可以設計出更高階、更易於維護和測試的元件

第7章：複用與模組化

元素的rel="import"和模組匯入

HTML Imports是HTML和JavaScript的一種模組格式，允許在HTML文件中匯入外部資源。可以使用元素的rel="import"屬性來匯入模組。

示例程式碼：

<head>
  <link rel="import" href="my-module.html">
</head>
<body>
  <my-element></my-element>
</body>

Web Components庫和框架（如Polymer、lit-element等）

Web Components是一種模組化的方法，用於構建可重用和可組合的UI元件。可以使用各種Web Components庫和框架來簡化開發過程。

示例程式碼：

// Polymer
import { PolymerElement, html } from '@polymer/polymer';

class MyElement extends PolymerElement {
  static get template() {
    return html`
      <div>Hello, World!</div>
    `;
  }
}

customElements.define('my-element', MyElement);

// lit-element
import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello, World!</div>
    `;
  }
}

customElements.define('my-element', MyElement);

Web Components的模組化最佳實踐

為了確保Web Components的可重用性和可維護性，需要遵循一些最佳實踐。

  1. 元件應該是可重用的：元件應該是獨立的、可重用的，並且不應該依賴於特定的應用程式狀態。
  2. 元件應該是可組合的：元件應該可以與其他元件組合在一起，以建立更大的元件。
  3. 元件應該是可測試的：元件應該是可測試的，可以透過單元測試和整合測試來驗證其功能。
  4. 元件應該是可維護的：元件應該易於理解和維護，並且應該遵循一致的編碼風格和架構。
  5. 元件應該是可訪問的：元件應該遵循可訪問性的最佳實踐，以確保所有使用者都可以使用它們。

透過遵循這些最佳實踐，可以確保Web Components的可重用性和可維護性，並使得應用程式更加模組化和可擴充套件。

第8章：現代Web開發中的Web Components

Web Components與現代Web框架的整合

現代Web框架（如Angular、React、Vue）雖然各自有其獨特的元件系統，但它們也支援與Web Components的整合，以利用Web
Components的可重用性和模組化優勢。以下是一些整合方式：

  • Angular: Angular透過ng-content和@Input、@Output等特性，可以方便地使用Web Components。可以將Web
    Components作為Angular元件的一部分，或者在Angular應用中作為自定義元素使用。
  • React: React透過forwardRef和useRef等API，可以與自定義元素（Custom Elements）配合使用。透過React.forwardRef將Web
    Components包裝成React元件，可以在React應用中直接使用。
  • Vue: Vue透過v-bind、v-on等指令，可以與自定義元素或使用Vue.extend建立的元件一起工作。Vue的Composition API也可以與Web
    Components無縫整合。

Web Components在服務端渲染（SSR）中的應用

服務端渲染（SSR）是現代Web開發中的一種策略，它允許在伺服器端生成完整的HTML，然後傳送到客戶端，提高首屏載入速度。對於Web
Components，SSR需要特別處理，因為它們依賴於瀏覽器環境來建立和渲染。

  • 使用伺服器端庫：一些庫（如@webcomponents/web-component-server）提供了服務端渲染Web
    Components的能力，它允許在伺服器上建立虛擬DOM，然後在客戶端上進行渲染。
  • 預渲染：在客戶端首次渲染時，可以將元件的HTML結構和資料一起傳送到客戶端，然後在客戶端透過JavaScript初始化這些元件。
  • 狀態管理：確保在伺服器端和客戶端之間同步狀態，因為Web Components可能依賴於元件內部的狀態。

在SSR中使用Web Components時，需要考慮到瀏覽器環境和伺服器環境的差異，確保元件可以在兩種環境下正確工作。同時，由於Web
Components的模組化特性，它們通常更容易適應SSR的場景。

相關文章