一、讓人又愛又恨的Web Components
Web Components是一種用於構建可重用的Web元素的技術。它允許開發者創建自定義的HTML元素，這些元素可以在不同的Web應用程序中重複使用，並且具有自己的樣式、行爲和功能。
Web Components並非一項新技術，而是一組持續演進的、由W3C標準化的組件化API。最早可以追溯到2011年左右，大約在2016年左右各個瀏覽器才實現了Custom Element V1版本。然而，在同一時期，諸如Vue和React等組件化框架已經開始主導前端開發生態。
儘管近幾年Web Components標準和技術都趨於成熟，但早期面臨的兼容性問題以及後來Vue和React等MVVM框架的崛起，導致Web Components領域一直處於低調狀態。接下來，我們將從Web Components的發展歷程、優勢以及開發中面臨的挑戰三個方面更深入地瞭解Web Components。
1、Web Components發展歷程
2、Web Components有哪些優勢
目前，前端開發中有許多流行的框架可供選擇，如React、Vue、Angular、Solid、Svelte、Preact等。框架的選擇是一個複雜的決策過程。當框架版本升級時，項目可能需要面臨重構的問題。例如，從Vue2升級到Vue3可能需要付出較大的改造成本。如果不進行升級，就無法使用最新特性，甚至可能面臨框架舊版本不再維護的尷尬局面。在這種情況下，Web Components 的框架無關性可以在一定程度上改善這種局面。
就性能而言，以將 React 組件轉換爲 Web Components 爲例，可以優化執行過程，減少阻塞，提高頁面性能。在普通的 React 組件中，初次執行時需要一次性完成所有必須的節點邏輯，這些邏輯的執行會同步佔用在 JavaScript 的主線程上。當頁面變得足夠複雜時，一些非核心邏輯可能會阻塞後面核心邏輯的執行。而通過使用 Web Components 優化 React 組件，執行過程會變得更簡潔。例如，註冊一個複雜的邏輯組件時，在 React 執行時只需執行一個 createElement 語句，創建組件只需要 1-2 微秒即可完成。真正的邏輯不會立即執行，而是等到“核心任務”執行完畢後再執行，甚至可以在合適的時機再執行，從而降低 Diff 成本。
3、使用Web Components開發的痛點
雖然Web Components具有許多令人喜歡的優點，但在實際開發中也存在一些棘手的問題。以下是幾個典型問題：
針對這些問題，開發人員可能需要考慮採取一些額外的措施來解決挑戰，以確保Web Components在實際應用中能夠更加順暢地運行。
二、目前主流的Web Components組件方案
1、頭部案例
Twitter 2016 年開始將自己的嵌入式推文從 iframe 切換成 ShadowDOM，減少了內存消耗、加快了渲染速度，並批量渲染的時候保持絲滑。Upcoming Change to Embedded Tweet Display on Web
Youtube
Youtube 作爲 google 系的產品，很早就在全站用上了 Web Components，並且開源了自己播放器組件 GitHub - GoogleWebComponents/google-youtube: YouTube video playback web component此外 google 開源的 Web Components 還是很多的，Google Web Components · GitHub ，包括地圖、drive、日曆等等。
Github
Github 對 Web Components 的使用很早，具體可以看： How we use Web Components at GitHub | The GitHub Blog，2017 年 Custom Elements v1 版本在 chrome 和 safari 上相繼實現之後，Github 開始大範圍使。要知道 Github 2018 年纔剛剛完全移除 jQuery：Removing jQuery from GitHub.com frontend | The GitHub Blog 這既得益於 Github 自身項目組件化的架構，也得益於 Web Components 本身與框架無關的特性非常識合作老項目升級。
Adobe Spectrum
Adobe Spectrum 是由 Adobe 創建的設計系統，該站點是一個基於 Web Components 的 UI 框架產品。
2、方案對比
目前主流的 Web Components 組件方案有三種：
方案一：
方案二：
方案三：
特點：以Svelte和Solid爲代表，直接將組件編譯成原生 Web Components
優點：放棄了虛擬DOM，利用編譯或轉譯能力直接生成操作DOM的更新函數，性能優秀，接近原生DOM。另外Vue3中的Vapor模式，正是借鑑了這種模式，目前正在試驗階段。
三、與SolidJS結合的“化學反應”
1、SolidJS有何不同
SolidJS 是一個快速、靈活、可擴展的 JavaScript 庫，用於構建用戶界面。與其他前端框架相比，SolidJS 有一些獨特的特點和優勢：
2、可以解決哪些問題
四、從0到1搭建 Aura Design Web Components組件庫
1、工程目錄設計
該項目採用了 Monorepo 設計，旨在統一管理各個子項目，避免開發階段頻繁發佈/安裝 npm 包來同步代碼。具體內容包括：
2、部分細節展示
2.1、組件樣式編寫
Web Components組件中的樣式是內聯到每一個組件的Shadow DOM中，因此不能用常規的CSS Modules等方案。本項目中使用了大約4種不同的內聯樣式方案，以對應不同的應用場景：
import styles from './Button.css?inline';const styles = css`
:host {
display: inline-block;
}
.box {
height: ${props.size + 2}px;
line-height: ${props.size + 2}px;
position: relative;
overflow: hidden;
}
.nums-chip {
transition: transform 1.5s;
transform: translate(0, -50%);
overflow: hidden;
}
.number {
font-size: ${props.size}px;
line-height: ${props.size + 2}px;
}
`;...
return (
<>
<link href={`https://cdn.bootcdn.net/ajax/libs/highlight.js/11.8.0/styles/atom-one-${props.theme}.min.css`} rel="stylesheet"></link>
<style>{styles}</style>
<div innerHTML={md.render(props.text)}></div>
</>
);
...2.2、Svg圖標集成
Icon組件引入和註冊
import {
defineCustomElements,
registerIcon,
Icon,
} from '@aura-group/aura-design';
registerIcon('/iconfont.svg'); // 自定義svg圖標註冊，使用主項目根目錄的svg圖標文件，如果不註冊則使用默認圖標
defineCustomElements({ Icon }); // 註冊Web Components圖標組件組件使用
<ar-icon name="download" size="20px" color="#4213de"></ar-icon>2.3、組件打包
支持ES（按需加載）和UMD兩種範式，自動生成Typescript聲明文件：
package.json
{
"name": "@aura-group/aura-design",
"version": "0.3.9",
"description": "",
"main": "dist/aura-design.umd.js",
"module": "dist/aura-design.es.js",
"typings": "dist/types/components/index.d.ts",
"files": [
"dist"
],
"type": "module",
...
}Vite相關配置
...
build: {
lib: {
entry: 'src/components/index.ts',
name: 'aura-design',
fileName: (format) => `aura-design.${format}.js`,
},
},
...3、基於Storybook的組件文檔
Storybook 是一個開源工具，用於開發和展示 React、Vue、Angular 等前端組件的交互式 UI 組件庫。通過 Storybook，開發人員可以在一個獨立的環境中編寫、展示和測試組件，而不必依賴於整個應用程序。這樣可以更快地開發和調試組件，同時也方便團隊成員之間的協作。
Storybook 提供了一個交互式的界面，開發人員可以在其中創建不同的“故事”（stories），每個故事對應一個組件的不同狀態或交互方式。通過 Storybook，開發人員可以輕鬆地查看和測試組件在不同狀態下的表現，從而更好地理解和調試組件的行爲。
4、未來規劃
目前，我們的組件庫中包含了16個基礎組件和一些與AI Chat相關的組件。在 A-M 網站中，95% 的組件都源自 Aura Design 組件庫。未來，除了繼續封裝一些基礎組件外，我們將優先開發常規組件庫中缺失的比如AI應用的相關組件。隨着組件庫的逐步豐富和條件的成熟，我們會考慮將其開源。如果您有任何相關組件的封裝需求或希望成爲項目的成員，請隨時與我聯繫。