這篇大概講述了為什麼選 Web Component 和 做的過程我都在怎麼減少依賴。

在公司做的 Vue Component 後，我發現依賴的還是太嚴重了，
尤其當前端框架要大改時，每一個做過的東西可能都要大改，
Demo 展示也要改，是一項很耗時耗能的事情，
為了擺脫這些依賴，做了一些研究後，
我選擇了 Web Component 作為最後的決定，優點如下：

1. 只要在主流框架內做一些宣告，就可以使用
2. 主流前端框架改版時，注意宣告是否要改即可
3. HTML 新手只要引入 js 就可使用
4. Demo 永不過時
5. 搭配 shadow dom，CSS 可隔絕
6. 必要時，開放 part 可以改CSS
7. HTML 原生為主，需要時才做成 Web Component
8. CSS Variables 就可以用在非 Web Component 上
9. 技術發展長遠，資源也算好找
10. 當有技術更新時，瀏覽器或多或少都會跟上
11. 可以引用單獨一個 Web Component 使用
12. 要客制化時，就把 Source 下載自己改 Component
13. 比較大一點的 Component，因為基本都是用原生 HTML 加上 CSS Variable
    所以 Component 之間依賴極少，不會像之前用 CSS 框架會被限制住要改很困難
14. 做 playground 時，依賴也極少，因為 Component 也是獨立的，也很少修東修西的

而且這次我不帶預設的風格、顏色主題，
可以視為 headless component，
不過我還是有做一組我搭配的顏色，
使用者也可以不用，就是當作我的應用範例，
只要將 Web Component 的 CSS Variable 都制定最小規則，
而且將可以調整的變數設的很細，
那麼未來只要調整 CSS Variable 就行了，
不需要像 NuxtUI 換個theme 還要去設定檔設定一些特別的對應，
或是搞一些有的沒的，將顏色控制歸還給最原始的 CSS。

將依賴降至最低，也就等於最容易入手和修改，
讓無障礙入門門檻降至最低，也是有利於無障礙。

當然，我非前端工程師，在把 Web Component 應用到三大框架時肯定還有一堆問題，
例如當我做出來幾版、自己應用在 Nuxt 時，碰到的就是都要用 Client ，還有一些缺點可能就是框架的語法糖沒辦法使用在我做的 Web Component 上，這裏因為非我領域，我之後是請 AI 幫忙盡量做到我能力範圍內可以做好的。

而在這個專案裡，我也學習了寫 Unit Test 的觀念，對我個人來說也是一種成長，
最感到困惑的就是 Unit Test 到底要不要做到檢測每一種無障礙的技術層面問題，
例如 id 跟 for 有沒有同樣的值一些這種很細緻精確的對應關係。

總之，我整個 side project 建立的過程中，UI Kit 就是不斷地在更新，
然後我知道開發的週期會很長，所以我盡量都用一些當時在開發時的最新技術，
這樣等開發末期時，那些新技術也都支援了。
然後也因為開發這些 UI Kit 的過程，也增強了自己對於依賴的收斂，
提供之後發展自己的理念有至關重要的思路。

感興趣的朋友可以到這個repo觀看內容
Accesserty UI Kit Github Repo