鐵人檔案
從框架回到原生。
了解瀏覽器原生的 Web Component 開發技術，脫離對框架的依賴。
從基礎的三大核心 Custom Elements、Shadow DOM 、HTML Templates，利用 30 天慢慢打造可重用、獨立性高的 Web 元件。
來說說為什麼我會選擇這個題目。 記得 2023 剛轉職的那年，有機會參與了 WebConf。其中一個主題："鳳‧極意？！ - Paul Li"...
在我初學 Vanilla JS 時，並沒有特別意識到 元件化 的概念，直到接觸了 React 和 Angular，才開始頻繁地接觸到 component 這個詞...
為了讓後續開發更順利，開始實作前，還是得先長篇大論一下～ 我在學習 Web Component 的過程中常常會陷入：這個 UI 該怎麼寫的思維陷阱。但其實，W...
接觸到 Web Component 才第一次聽過的名詞，花了一些時間才真正理解用法。就請各位看下去吧！ Shadow DOM 的基本概念 影子 DOM（Sh...
終於要介紹第三個核心 Template 在前兩篇文章中已經介紹了 Web Component 的 Custom Element 與 Shadow DOM，接下...
截至目前為止，我們一直都還沒有提到 生命週期。但...是的，沒錯！跟各大框架一樣，Web Component 也有生命週期。其實光看到這四個字，心裡就已經開始抗...
在昨天，我們已經學會了 Web Component 的 生命週期。接下來要深入了解 Web Component 生命週期中的 attributeChangedC...
經過了一週的時間，與前幾篇文章的介紹，對於 Web Component 應該已經有了初步的理解了。我們從如何透過 template 與 Shadow DOM 來...
我們在前面學習到了監聽 attribute（屬性） 來改變元件的狀態或樣式，而除了 HTML 的 attributes 之外，還有另一種傳遞資料給 compon...
進入第二個元件前，我們先介紹一下 Web Component 的第四個隱藏概念，也就是 slot（插槽）。 什麼是 slot ? 不管是使用原生 JS 還是框架...
