前言

在學會使用 WebComponent 的相關技巧後，陸陸續續也實作了不少的 UI 元件， 方便後續在進行前端專案的時候可以快速的重複使用。

而且不管您的專案是使用 VueJS、ReactJS 或者Angular， 都可以支援原生的 WebComponent，所以等於是一個通用的軍火庫， 寫一次就可以 Use everywhere，所以非常推薦將您常用的 UI 元件寫成 WebComponent 版本。

下面整理我目前有實作開源的 WebComponent 元件，後續如果有新做的 WebComponent 元件， 也會繼續更新上來，如果使用上有問題也歡迎發 issue 給我，謝謝 😊

小型輕量的 WebComponents 元件庫

項次WebComponent 元件安裝 / 原始碼
1WebComponent Demo | swipe-to-refresh
A WebComponent to pull the window down and refresh.		npm wc github
2WebComponent Demo | mic-input
Speech input WebComponent implemented with Web Speech API.		npm wc github
3WebComponent Demo | star-input
Star rating input implemented with WebComponent.		npm wc github
4WebComponent Demo | fl-input
Floating label input implemented with WebComponent.		npm wc github
5Demo | scroll-to-element
An alternative implement of smooth scroll.		npm github
6WebComponent Demo | mac-input
Mac Address input implemented with WebComponent.		npm wc github
7WebComponent Demo | dropdown
Dropdown menu implemented with WebComponent.		npm wc github
8WebComponent Demo | tw-address-input
Taiwan address input implemented with WebComponent.		npm wc github
9WebComponent Demo | wc-dot-hr
Dotted style horizontal rule web component.		npm wc github
10WebComponent Demo | wc-qrcode
An efficient and lightweight QR Code WebComponent integrated with Rust wasm library.		npm wc github
11WebComponent Demo | wc-bubble
A lightweight and well designed chat bubble WebComponent.		npm wc github