這幾天在找網路上的web component相關的庫，才發現自己之前的很多想法都是有問題的。想到我之前在專案中寫的東西，以及本次鐵人賽的部分文章。這下就算鐵人賽結束我也要大改文章了...

想要寫好程式碼，除了清晰的思考，充足的體力，使用的工具也是很重要的。我這裡會把我知道的工具庫列出來，再加一點點心得

LitElement

因為是google出品的套件庫，品質本身就有一定的保證，google另一套web component也是使用這個套件生成的。入門也算簡單，需要學習的只有html和css這二個函式，以及一些內建的裝飾器。

這個庫最大的好處是生成的組件庫在其他框架中使用時，有問題比較容易找到回答。

fast.design

microsoft出品的套件庫，本身有三種使用方式。直接使用現成的組件(我認為官網的紅黑配色不好看...)、客製化CSS配置和extends現有的組件。

如果各位有在使用class和typescript來開發，使用fast.design也是個不錯的選擇，因為typescript就是microsoft的作品之一

官網內還很貼心的提示在windows環境下可能會出現的開發問題...

stencil.js

感謝babel轉譯JSX功能的更新，現在JSX不會只限定React使用了。拜其所賜，stencil除了傳統的class建構方式，還能使用本來只在react中看到的Functional Components來建構web component

其他

Skate.js

github

嚴格來說這套件是用來更高效的使用custom element，所以生命周期之類的還是要自己寫。

haunted

github

嚴格來說這套件沒辦法直接生成web component，要和LitElement、hyper(HTML)或是上面的Skate.js組合，這個套件庫的最大優點是，可以使用類似react-hook的語法來管理state，再組合其他能生成custom element的套件，就能做出一個超級像react 的web component。

hyper(HTML): github。一個能生成Virtual DOM的套件

使用例子