---

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

excerpt:
這篇文章介紹了Web Components技術(shù)，它允許開發(fā)者創(chuàng)建可復(fù)用、封裝良好的自定義HTML元素，并直接在瀏覽器中運行，無需依賴外部庫。通過組合HTML模板、Shadow DOM、自定義元素和HTML imports，Web Components增強了原生DOM的功能，提高了組件化開發(fā)的封裝性和可維護性，同時支持組件的生命周期管理和高級設(shè)計模式，有利于提升網(wǎng)頁應(yīng)用的性能和開發(fā)效率。

categories:

• 前端開發(fā)

tags:

• Web Components
• 原生DOM
• 封裝性
• 組件化
• 生命周期
• 高級設(shè)計
• 性能優(yōu)化

---

掃碼關(guān)注或者微信搜一搜：編程智域 前端至全棧交流與成長

第1章：引言

Web Components的起源與發(fā)展

Web Components是一種基于Web標準的新興技術(shù)，旨在解決Web應(yīng)用程序開發(fā)中的可重用組件化問題。Web
Components的核心思想是，將HTML、CSS和JavaScript結(jié)合起來，實現(xiàn)可重用、可組合和可封裝的組件。

Web Components的起源可以追溯到2011年，由W3C（萬維網(wǎng)聯(lián)盟）提出的一個名為Web Components Specifications（Web
Components規(guī)范）的項目。該項目包括四個主要模塊：

1. Templates and Slots（模板和插槽）：提供一種在HTML中聲明模板的方式，并在組件中使用插槽來實現(xiàn)內(nèi)容分發(fā)。
2. Shadow DOM（影子DOM）：提供一種在組件內(nèi)部創(chuàng)建獨立的DOM樹，與外部DOM樹隔離開來，實現(xiàn)樣式和內(nèi)容的封裝。
3. Custom Elements（自定義元素）：提供一種在HTML中定義和注冊新元素的方式，擴展HTML標準元素集。
4. Decorators（裝飾器）：提供一種在組件生命周期中添加額外功能的方式，如屬性觀察器、事件監(jiān)聽器和生命周期回調(diào)。

為什么選擇Web Components

Web Components具有以下優(yōu)點：

• 可重用性：組件可以在不同的項目中重用，提高開發(fā)效率和一致性。
• 可組合性：組件可以嵌套和組合，構(gòu)建更加復(fù)雜的UI。
• 可封裝性：組件可以在內(nèi)部實現(xiàn)細節(jié)上進行隔離，提高可維護性和可測試性。
• 與現(xiàn)有Web技術(shù)的兼容性：Web Components基于Web標準，與HTML、CSS和JavaScript高度兼容。

第2章：基礎(chǔ)知識

Web Components概述

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

1. Custom Elements（自定義元素）：允許你定義新的HTML元素，這些元素可以包含自己的HTML結(jié)構(gòu)、CSS樣式和JavaScript行為。
2. Shadow DOM（影子DOM）：提供了一種封裝方式，使得自定義元素可以擁有自己的DOM樹，與頁面的其他部分隔離開來，防止樣式?jīng)_突。
3. HTML Templates（HTML模板）：提供了一種聲明性的方式來定義HTML結(jié)構(gòu)，可以在運行時插入到文檔中。
4. HTML Imports（HTML導(dǎo)入）：允許你導(dǎo)入HTML文檔作為模塊，雖然這個特性已經(jīng)被廢棄，但它的理念被其他模塊化方案所繼承。

HTML、CSS和JavaScript基礎(chǔ)知識

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

• HTML：超文本標記語言，用于創(chuàng)建網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。
• CSS：層疊樣式表，用于設(shè)置網(wǎng)頁元素的樣式，如顏色、字體和布局。
• JavaScript：一種編程語言，用于實現(xiàn)網(wǎng)頁的交互性和動態(tài)內(nèi)容。

Shadow DOM和模板模式

Shadow DOM：

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

模板模式：

模板模式是Web
Components中用于創(chuàng)建自定義元素的一種方式。它允許你定義一個HTML模板，這個模板包含了自定義元素的HTML結(jié)構(gòu)。然后，你可以使用JavaScript來實例化這個模板，并將其附加到DOM中。模板模式通常與Shadow
DOM結(jié)合使用，以實現(xiàn)自定義元素的封裝和樣式隔離。

通過結(jié)合使用Shadow DOM和模板模式，你可以創(chuàng)建出功能強大、可重用的Web Components，這些組件可以在不同的項目中重復(fù)使用，并且能夠保持自己的樣式和行為。

第3章：基礎(chǔ)組件開發(fā)

template元素和slot的使用

template元素在Web Components中扮演了重要角色，它允許你定義組件的結(jié)構(gòu)和內(nèi)容。template
標簽內(nèi)可以包含HTML結(jié)構(gòu)，這些結(jié)構(gòu)會被復(fù)制到每個組件實例中。slot
元素則用于定義組件內(nèi)部可以接收內(nèi)容的地方，外部可以將內(nèi)容插入到這些slot中，實現(xiàn)了組件的可擴展性。標準中文電碼查詢 | 一個覆蓋廣泛主題工具的高效在線平臺 (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，外部可以傳遞自定義內(nèi)容替換它們。

custom-element定義與注冊

custom-element是Web Components的核心，用于創(chuàng)建自定義的HTML元素。定義一個custom-element通常需要以下步驟：

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

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

2. 實現(xiàn)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);
   }// 假設(shè)templateContent是template元素的內(nèi)容
   const templateContent = document.querySelector('template');

style和link元素在組件中的應(yīng)用

style元素用于定義組件的樣式，通常放在<custom-element>標簽內(nèi)部，或作為<style>標簽的外部鏈接（<link rel="stylesheet">
）。外部樣式可以通過import導(dǎo)入到組件內(nèi)部，這樣可以保持樣式和組件的封裝。

<!-- 內(nèi)部樣式 -->
<style>/* ... */
</style><!-- 外部鏈接 -->
<link rel="stylesheet" href="styles.css">

在組件內(nèi)部，可以使用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. 廣泛支持：所有現(xiàn)代瀏覽器都內(nèi)置了對DOM的支持。
3. 性能：對于簡單的操作，DOM操作通常很快，但復(fù)雜操作可能導(dǎo)致性能問題，特別是當涉及到大量元素時。
4. 事件處理：DOM提供了豐富的事件模型，可以直接監(jiān)聽和響應(yīng)元素的事件。
5. 樣式控制：可以直接通過style屬性或者CSS類來控制元素的樣式。

Web Components的優(yōu)勢和局限性

優(yōu)勢：

• 封裝性：Web Components提供了一種將HTML、CSS和JavaScript封裝在一起的方式，提高了代碼的復(fù)用性和維護性。
• 組件化：組件可以獨立于頁面，可以被多個頁面復(fù)用，減少了代碼冗余。
• 自定義元素：可以創(chuàng)建自定義的HTML元素，擴展HTML元素庫。
• 數(shù)據(jù)綁定：通過<template>和<slot>，可以實現(xiàn)數(shù)據(jù)驅(qū)動的組件結(jié)構(gòu)。

局限性：

• 學習曲線：Web Components的API和概念可能對初學者來說較難理解和掌握。
• 瀏覽器支持：雖然大部分現(xiàn)代瀏覽器支持，但一些舊版本瀏覽器可能不支持，需要使用polyfills或polymer庫來彌補。
• 性能：對于復(fù)雜的組件，如果處理不當，可能會有性能問題，尤其是在處理大量數(shù)據(jù)時。
• 工具鏈：雖然有工具如Web Components Workbox等來優(yōu)化，但整體工具鏈相比React、Vue等庫可能不夠成熟。

兼容性問題與解決方案

• 瀏覽器兼容性：使用@webcomponents/webcomponentsjs庫或者polyfills（如custom-elements-es5-adapter
  ）來提供向后兼容性，確保在不支持Web Components的瀏覽器中運行。
• polyfills：對于一些新特性（如Shadow DOM、HTML Templates等），可以使用polyfills來提供支持。
• Babel和TypeScript：使用這些工具可以將新特性轉(zhuǎn)換為舊版本瀏覽器可以理解的代碼。
• 測試：確保在各種瀏覽器和版本上進行充分的測試，確保組件的兼容性。

總的來說，Web Components提供了一種更現(xiàn)代、更模塊化的開發(fā)方式，但開發(fā)者需要在兼容性、學習成本和工具成熟度之間權(quán)衡。

第5章：自定義元素API

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

在Web Components中，自定義元素有以下幾個關(guān)鍵的生命周期方法：

1. createdCallback: 當元素被創(chuàng)建（但可能尚未插入到文檔中）時調(diào)用。這是初始化元素內(nèi)部狀態(tài)和處理數(shù)據(jù)的好時機。

class MyCustomElement extends HTMLElement {createdCallback() {// 初始化元素內(nèi)部狀態(tài)}
}

1. attachedCallback: 當元素被插入到文檔中時調(diào)用。這時可以綁定事件和處理DOM操作。

attachedCallback() {this.addEventListener('click', this.handleClick);
}

1. detachedCallback: 當元素從文檔中移除時調(diào)用，可以在這里清理資源。
2. attributeChangedCallback: 當元素的屬性被修改時調(diào)用，可以更新內(nèi)部狀態(tài)。

attributeChangedCallback(name, oldValue, newValue) {// 更新屬性值
}

1. connectedCallback: 在元素被連接到DOM樹中（可能是通過<slot>插入）時調(diào)用。

屬性綁定和事件處理

• 屬性綁定：可以使用<template>元素的<slot>和<slot-scope>來實現(xiàn)數(shù)據(jù)綁定，或者使用this.set方法來設(shè)置和監(jiān)聽屬性。

this.set('myProperty', newValue);

• 事件處理：通過addEventListener方法添加事件監(jiān)聽器，事件處理函數(shù)通常在this上下文中。

addEventListener('click', (event) => {// 處理點擊事件
});

與外部數(shù)據(jù)交互

• 數(shù)據(jù)綁定：可以使用<template>和<slot>來綁定外部數(shù)據(jù)，或者通過@property裝飾器聲明響應(yīng)式屬性。

@property({ type: String, reflect: true })
myData;

• 事件通信：自定義元素可以通過customEvent來觸發(fā)自定義事件，外部可以通過addEventListener監(jiān)聽這些事件。

this.dispatchEvent(new CustomEvent('myCustomEvent', { detail: data }));

• 數(shù)據(jù)交互API：使用fetch、XMLHttpRequest或Web API（如localStorage、IndexedDB）來獲取和存儲數(shù)據(jù)。

第6章：高級組件設(shè)計

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

高階組件（HOCs）是React中用于重用組件邏輯的高級技術(shù)。HOC是一個函數(shù)，它接受一個組件并返回一個新的組件。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() {// ...那數(shù)據(jù)源...并訂閱變化...DataSource.addChangeListener(this.handleChange);}componentWillUnmount() {DataSource.removeChangeListener(this.handleChange);}handleChange() {this.setState({data: selectData(DataSource, this.props)});}render() {// ...并將新的數(shù)據(jù)傳遞給被包裝的組件!return <WrappedComponent data={this.state.data} {...this.props} />;}}
}

集成狀態(tài)管理（如Redux或Vue.js）

狀態(tài)管理庫（如Redux）可以幫助管理大型應(yīng)用程序的狀態(tài)，使其更易于維護和測試。Redux是一個可預(yù)測的狀態(tài)容器，用于JavaScript應(yīng)用。

示例代碼：

import { createStore } from 'redux';// 創(chuàng)建一個reducer
function todos(state = [], action) {switch (action.type) {case 'ADD_TODO':return state.concat([action.text]);default:return state;}
}// 創(chuàng)建store
let store = createStore(todos);// 添加一個todo
store.dispatch({type: 'ADD_TODO',text: 'Read the docs'
});// 打印state
console.log(store.getState());

使用Shadow DOM實現(xiàn)封裝和樣式隔離

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

示例代碼：

class MyElement extends HTMLElement {constructor() {super();// 創(chuàng)建一個shadow rootthis.attachShadow({ mode: 'open' });// 添加一些內(nèi)容this.shadowRoot.innerHTML = `<h1>Hello, World!</h1>`;}
}// 定義custom element
customElements.define('my-element', MyElement);

通過以上方法，可以設(shè)計出更高級、更易于維護和測試的組件

第7章：復(fù)用與模塊化

元素的rel="import"和模塊導(dǎo)入

HTML Imports是HTML和JavaScript的一種模塊格式，允許在HTML文檔中導(dǎo)入外部資源?？梢允褂迷氐膔el="import"屬性來導(dǎo)入模塊。

示例代碼：

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

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

Web Components是一種模塊化的方法，用于構(gòu)建可重用和可組合的UI組件。可以使用各種Web Components庫和框架來簡化開發(fā)過程。

示例代碼：

// 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. 組件應(yīng)該是可重用的：組件應(yīng)該是獨立的、可重用的，并且不應(yīng)該依賴于特定的應(yīng)用程序狀態(tài)。
2. 組件應(yīng)該是可組合的：組件應(yīng)該可以與其他組件組合在一起，以創(chuàng)建更大的組件。
3. 組件應(yīng)該是可測試的：組件應(yīng)該是可測試的，可以通過單元測試和集成測試來驗證其功能。
4. 組件應(yīng)該是可維護的：組件應(yīng)該易于理解和維護，并且應(yīng)該遵循一致的編碼風格和架構(gòu)。
5. 組件應(yīng)該是可訪問的：組件應(yīng)該遵循可訪問性的最佳實踐，以確保所有用戶都可以使用它們。

通過遵循這些最佳實踐，可以確保Web Components的可重用性和可維護性，并使得應(yīng)用程序更加模塊化和可擴展。

第8章：現(xiàn)代Web開發(fā)中的Web Components

Web Components與現(xiàn)代Web框架的集成

現(xiàn)代Web框架（如Angular、React、Vue）雖然各自有其獨特的組件系統(tǒng)，但它們也支持與Web Components的集成，以利用Web
Components的可重用性和模塊化優(yōu)勢。以下是一些集成方式：

• Angular: Angular通過ng-content和@Input、@Output等特性，可以方便地使用Web Components?？梢詫eb
  Components作為Angular組件的一部分，或者在Angular應(yīng)用中作為自定義元素使用。
• React: React通過forwardRef和useRef等API，可以與自定義元素（Custom Elements）配合使用。通過React.forwardRef將Web
  Components包裝成React組件，可以在React應(yīng)用中直接使用。
• Vue: Vue通過v-bind、v-on等指令，可以與自定義元素或使用Vue.extend創(chuàng)建的組件一起工作。Vue的Composition API也可以與Web
  Components無縫集成。

Web Components在服務(wù)端渲染（SSR）中的應(yīng)用

服務(wù)端渲染（SSR）是現(xiàn)代Web開發(fā)中的一種策略，它允許在服務(wù)器端生成完整的HTML，然后發(fā)送到客戶端，提高首屏加載速度。對于Web
Components，SSR需要特別處理，因為它們依賴于瀏覽器環(huán)境來創(chuàng)建和渲染。

• 使用服務(wù)器端庫：一些庫（如@webcomponents/web-component-server）提供了服務(wù)端渲染W(wǎng)eb
  Components的能力，它允許在服務(wù)器上創(chuàng)建虛擬DOM，然后在客戶端上進行渲染。
• 預(yù)渲染：在客戶端首次渲染時，可以將組件的HTML結(jié)構(gòu)和數(shù)據(jù)一起發(fā)送到客戶端，然后在客戶端通過JavaScript初始化這些組件。
• 狀態(tài)管理：確保在服務(wù)器端和客戶端之間同步狀態(tài)，因為Web Components可能依賴于組件內(nèi)部的狀態(tài)。

在SSR中使用Web Components時，需要考慮到瀏覽器環(huán)境和服務(wù)器環(huán)境的差異，確保組件可以在兩種環(huán)境下正確工作。同時，由于Web
Components的模塊化特性，它們通常更容易適應(yīng)SSR的場景。