Web Components，啟動(dòng)！帶你走進(jìn) Web Components 的世界！

作者：CUGGZ 2024-02-26 09:13:35

本文就來(lái)分享九個(gè)值得使用和學(xué)習(xí)的 Web Components 開(kāi)源項(xiàng)目，帶你走進(jìn) Web Components 的世界！

Web Components是W3C制定的一套規(guī)范，它允許開(kāi)發(fā)者創(chuàng)建可復(fù)用的自定義元素，這些元素可以像普通的HTML元素一樣在DOM中使用。這些自定義元素封裝了結(jié)構(gòu)、樣式和腳本，并且具有明確的接口，以便在其他Web應(yīng)用中使用。

Web Components 主要包括以下部分：

Custom Elements：允許開(kāi)發(fā)者定義自己的HTML元素，這些元素具有封裝好的結(jié)構(gòu)、樣式和腳本。Custom Elements的接口可以讓開(kāi)發(fā)者在自定義元素上添加屬性和方法，以擴(kuò)展HTML的功能。
Shadow DOM：為自定義元素提供了一個(gè)隔離的DOM環(huán)境，使得自定義元素的樣式和腳本不會(huì)影響到其他元素。Shadow DOM使得開(kāi)發(fā)者可以在自定義元素內(nèi)部使用CSS和JavaScript，而不用擔(dān)心樣式?jīng)_突或腳本相互干擾的問(wèn)題。
HTML Templates：提供了一種定義自定義元素結(jié)構(gòu)模板的方式。通過(guò)HTML Templates，開(kāi)發(fā)者可以創(chuàng)建包含插槽（slot）的模板，然后在實(shí)例化自定義元素時(shí)，將內(nèi)容填充到相應(yīng)的插槽中。

本文就來(lái)分享九個(gè)值得使用和學(xué)習(xí)的 Web Components 開(kāi)源項(xiàng)目，帶你走進(jìn) Web Components 的世界！

Lit

Lit 是一個(gè)基于 Web Components 標(biāo)準(zhǔn)的 JavaScript 庫(kù)，它提供了一系列的工具和 API ，使得創(chuàng)建高性能、動(dòng)態(tài)、可重用的 Web 組件變得更加容易。Lit 的特點(diǎn)包括：

輕量級(jí)：Lit 的代碼庫(kù)非常小巧，壓縮后只有不到 10KB，這使得它使用起來(lái)非常方便，加載速度也很快。
編程簡(jiǎn)潔：Lit 提供了一組簡(jiǎn)單的 API，并且支持使用 JavaScript 模板字符串進(jìn)行 HTML 的快速構(gòu)建，降低組件編寫(xiě)的難度。
可擴(kuò)展性強(qiáng)：Lit 不僅支持原生的 Web Components 標(biāo)準(zhǔn) API，還提供了一些自定義的組件 API，可以更加方便地實(shí)現(xiàn)高級(jí)功能。
生態(tài)豐富：Lit 社區(qū)活躍，提供了許多常用的外部庫(kù)和組件，可以幫助開(kāi)發(fā)者快速搭建復(fù)雜的應(yīng)用程序。

Github：https://github.com/lit/lit。

Fast Element

Fast Element 是一個(gè)基于 Web Components 標(biāo)準(zhǔn)的開(kāi)源 UI 庫(kù)，由 Microsoft 出品。Fast Element 旨在提供高性能、可維護(hù)和易擴(kuò)展的 Web Components，以便構(gòu)建現(xiàn)代化 Web 應(yīng)用程序。Fast Element 的特點(diǎn)包括：

簡(jiǎn)單易用：提供了一組簡(jiǎn)單的 API，可以使用 TypeScript 進(jìn)行開(kāi)發(fā)，并且支持使用 CSS 樣式進(jìn)行個(gè)性化定制，使得組件開(kāi)發(fā)更加容易。
可復(fù)用性強(qiáng)：提供了一些通用的組件，如按鈕、文本框等，這些組件可以直接調(diào)用或集成到其他組件中，降低了開(kāi)發(fā)和維護(hù)成本。
樣式定制靈活：支持使用 CSS 變量進(jìn)行主題定制，也支持使用 LESS 或者 Sass 進(jìn)行樣式的編寫(xiě)和管理，開(kāi)發(fā)者可以根據(jù)自身需求自由定制樣式。
支持無(wú)障礙訪問(wèn)：提供了高度可訪問(wèn)的 UI 組件，符合 W3C 的 Web Content Accessibility Guidelines (WCAG) 標(biāo)準(zhǔn)，在無(wú)障礙環(huán)境下使用也非常友好。

Github：https://github.com/Microsoft/fast。

Stencil

Stencil是一個(gè)開(kāi)源的使用TypeScript、JSX和CSS來(lái)創(chuàng)建符合標(biāo)準(zhǔn)的Web Components的編譯器。它結(jié)合了最流行框架的最佳概念，提供便捷的API和關(guān)鍵功能，如預(yù)渲染和對(duì)象作為屬性，使編寫(xiě)快速、強(qiáng)大的組件變得更加簡(jiǎn)單。Stencil還可以生成特定于框架的包裝器，以便與流行的框架直接集成使用，并提供優(yōu)化的開(kāi)發(fā)體驗(yàn)，包括實(shí)時(shí)重載和一個(gè)小型開(kāi)發(fā)服務(wù)器。

Github：https://github.com/ionic-team/stencil。

omi

omi 是騰訊出品的 Web Components 框架，內(nèi)置 JSX 和信號(hào) signal/Signal。其具有以下特點(diǎn)：

信號(hào)驅(qū)動(dòng)的響應(yīng)式編程：OMI框架采用信號(hào)驅(qū)動(dòng)的響應(yīng)式編程方式，確保用戶界面能夠準(zhǔn)確地根據(jù)需要進(jìn)行更新。這種編程方式有助于減少不必要的渲染和計(jì)算，提高應(yīng)用的性能和用戶體驗(yàn)。
完備的模板和組件：OMI框架提供了豐富的模板和組件，包括OMIU、JSX、Router、Suspense、VChart和VTable（Visactor）等。這些組件和模板都是開(kāi)箱即用的，無(wú)需進(jìn)行任何配置，可以大大簡(jiǎn)化開(kāi)發(fā)過(guò)程，提高開(kāi)發(fā)效率。
面向?qū)ο缶幊蹋∣OP）和數(shù)據(jù)驅(qū)動(dòng)編程（DOP）：OMI框架同時(shí)支持面向?qū)ο缶幊蹋∣OP）和數(shù)據(jù)驅(qū)動(dòng)編程（DOP）兩種編程方式。這意味著開(kāi)發(fā)者可以根據(jù)項(xiàng)目需求選擇最適合的編程方式，靈活應(yīng)對(duì)不同的開(kāi)發(fā)場(chǎng)景。
可構(gòu)建樣式表（Constructable Stylesheets）：OMI框架支持可構(gòu)建樣式表（Constructable Stylesheets），這使得樣式的管理和共享變得更加輕松。通過(guò)可構(gòu)建樣式表，開(kāi)發(fā)者可以更加高效地管理和維護(hù)應(yīng)用的樣式。
Web Components支持：OMI框架支持Web Components，這意味著開(kāi)發(fā)者可以輕松地創(chuàng)建符合標(biāo)準(zhǔn)的跨框架組件。這有助于提高組件的復(fù)用性和可維護(hù)性，降低開(kāi)發(fā)成本。
微小尺寸和極速性能：OMI框架具有微小的尺寸和極速的性能，支持所有現(xiàn)代瀏覽器。這得益于框架采用了先進(jìn)的技術(shù)和優(yōu)化手段，使得應(yīng)用能夠在保持高性能的同時(shí)保持較小的體積。

Github：https://github.com/Tencent/omi。

Quark Design

Quark Design 是哈啰出品的面向 C 端的下一代前端組件庫(kù)，它可以在任意框架或無(wú)框架中使用，支撐哈啰幾乎所有 C 端 H5 項(xiàng)目，包括交易，支付，兩輪，商城等。這是一個(gè)設(shè)計(jì)輕盈優(yōu)雅的企業(yè)級(jí) UI 組件庫(kù)，可以滿足所有日常使用的基礎(chǔ)組件需求。

Quark design 是一種全新的組件庫(kù)，底層基于Web Components，不同于傳統(tǒng)組件框架（如Antd, Vant），需要瀏覽器中需要做大量前置工作。Quarkd則將這些工作放到構(gòu)建應(yīng)用程序的編譯時(shí)來(lái)處理。組件的數(shù)據(jù)更新響應(yīng)由瀏覽器自身API處理，更簡(jiǎn)單，更高效！

Github：https://github.com/hellof2e/quark-design。

Lion

Lion 是一套基于 Web Components 的組件庫(kù)，具備高性能、高可訪問(wèn)性和靈活性。作為一個(gè)無(wú)偏見(jiàn)、可定制的白標(biāo)層，Lion 提供了豐富的組件基礎(chǔ)，允許開(kāi)發(fā)者輕松擴(kuò)展和構(gòu)建自己的組件層。

在性能方面，Lion 專注于在所有主流瀏覽器中實(shí)現(xiàn)卓越的性能，同時(shí)保持極低的依賴項(xiàng)數(shù)量，確保高效的運(yùn)行和加載速度。
在可訪問(wèn)性方面，Lion 致力于符合 WCAG 2.2 AA 標(biāo)準(zhǔn)，通過(guò)創(chuàng)建無(wú)障礙的組件，確保所有人都能夠輕松使用和訪問(wèn)。
在靈活性方面，Lion 提供了基于 Web 組件和 JavaScript 類的解決方案，這些方案可以根據(jù)具體需求進(jìn)行使用、采納和擴(kuò)展，滿足各種場(chǎng)景下的需求。
Lion 還采用了現(xiàn)代代碼的分發(fā)方式，以純 es 模塊的形式提供，便于集成和使用。同時(shí)，它還以最合適的形式公開(kāi)函數(shù)、類和 Web 組件，方便開(kāi)發(fā)者根據(jù)需求選擇和使用。

Github：https://github.com/ing-bank/lion。

Shoelace

Shoelace 是一個(gè)具有前瞻性的基于 Web Components 的 UI 組件庫(kù)。它具有以下特點(diǎn)：

兼容所有框架
兼容CDN
可通過(guò)CSS完全自定義
包含深色主題
以無(wú)障礙性為設(shè)計(jì)核心
提供一流的React支持
內(nèi)置本地化功能

Github：https://github.com/shoelace-style/shoelace。

UI5 Web Components

UI5 Web Components 是 SAP UI5 框架的一部分，它是一個(gè)開(kāi)源的 Web 組件庫(kù)，用于構(gòu)建現(xiàn)代的 Web 應(yīng)用。UI5 Web Components 提供了一系列的可復(fù)用的 UI 組件，如按鈕、輸入框、表格等，這些組件都是基于 Web 標(biāo)準(zhǔn)的自定義元素和 Shadow DOM 技術(shù)實(shí)現(xiàn)的。這意味著可以在任何支持這些 Web 標(biāo)準(zhǔn)的環(huán)境中使用這些組件，如 Angular、React、Vue 等。