鐵人檔案
從框架回到原生。
了解瀏覽器原生的 Web Component 開發技術，脫離對框架的依賴。
從基礎的三大核心 Custom Elements、Shadow DOM 、HTML Templates，利用 30 天慢慢打造可重用、獨立性高的 Web 元件。
為了確保 CustomInput 元件穩定性以及功能正確性，我們需要加入單元測試。 上一篇使用了 Vite 建立開發環境，在這一篇將使用 Vitest 來進行單...
前一篇我們撰寫完了測試，也利用一些時間將表單元件做了一些優化（詳細請見 github 專案）。接下來就要思考，如果希望這個元件可以被大家應用在不同的專案中，要怎...
昨天我們已經成功將元件發布到 npm 了，但各位有沒有發現少了一個很重要的東西？ 在上傳成功後，npm 其實有給了一段提示文字："This packa...
在前一篇文章，我們已經發布完成第一個 Web Component。還記得在 Day 2 時有提到過： 使用 Web Component 開發的元件可以在 Re...
在前一篇，我們已經示範了如何在 Angular 中套用自訂元件。這一篇，我們要來看看如何在 Vue 中使用自訂元件。 在 Vue 使用自訂元件建立會員註冊表單...
前兩篇已經談了 Web Component 套用到三大框架其中兩個框架 Angular、Vue的方法。 今天要介紹的是 Web Component 套用到 Re...
花了三天時間，一起初淺的學習了如何將 Web Component 使用在前端的三大框架中。今天我們再一起將主角拉回建立 Web Component 的軌道上。...
昨天我們初步使用 vite + TypeScript + Lit 建立了初步的元件架構。那麼今天，我們就接續來說說 Lit 的其他方法及功能吧！ Lit 中的...
在前面兩篇文章，介紹了 Lit 的元件初始化與屬性。完成靜態元件後，接下來要介紹 Lit 的生命週期（Life cycle）與事件（Event），讓元件可以動起...
最後一篇，我們回頭來聊聊 樣式。樣式，果然是讓我在學習 Web Component 的期間花最多心力的一個部分了。你是否覺得奇怪，為什麼樣式我們都一定要寫在 t...
