iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

原生元件養成計畫:Web Component 系列

從框架回到原生。
了解瀏覽器原生的 Web Component 開發技術,脫離對框架的依賴。
從基礎的三大核心 Custom Elements、Shadow DOM 、HTML Templates,利用 30 天慢慢打造可重用、獨立性高的 Web 元件。

參賽天數 14 天 | 共 14 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文 團隊兩貓一犬一條龍小隊
DAY 1

Day 1: 前言

來說說為什麼我會選擇這個題目。 記得 2023 剛轉職的那年,有機會參與了 WebConf。其中一個主題:"鳳‧極意?! - Paul Li&quot...

2025-09-10 ‧ 由 zoey 分享
DAY 2

Day 2: 所以 Web Component 是什麼?

在我初學 Vanilla JS 時,並沒有特別意識到 元件化 的概念,直到接觸了 React 和 Angular,才開始頻繁地接觸到 component 這個詞...

2025-09-11 ‧ 由 zoey 分享
DAY 3

Day 3: 初步設計與 Custom element

為了讓後續開發更順利,開始實作前,還是得先長篇大論一下~ 我在學習 Web Component 的過程中常常會陷入:這個 UI 該怎麼寫的思維陷阱。但其實,W...

2025-09-12 ‧ 由 zoey 分享
DAY 4

Day 4: Web Component 的影子樹 Shadow DOM

接觸到 Web Component 才第一次聽過的名詞,花了一些時間才真正理解用法。就請各位看下去吧! Shadow DOM 的基本概念 影子 DOM(Sh...

2025-09-13 ‧ 由 zoey 分享
DAY 5

Day 5: Web Component 的模板 Template

終於要介紹第三個核心 Template 在前兩篇文章中已經介紹了 Web Component 的 Custom Element 與 Shadow DOM,接下...

2025-09-14 ‧ 由 zoey 分享
DAY 6

Day 6: Web Component 的生命週期 Life cycle

截至目前為止,我們一直都還沒有提到 生命週期。但...是的,沒錯!跟各大框架一樣,Web Component 也有生命週期。其實光看到這四個字,心裡就已經開始抗...

2025-09-15 ‧ 由 zoey 分享
DAY 7

Day 7: Web Component 的屬性監聽 Attribute

在昨天,我們已經學會了 Web Component 的 生命週期。接下來要深入了解 Web Component 生命週期中的 attributeChangedC...

2025-09-16 ‧ 由 zoey 分享
DAY 8

Day 8: Web Component 的事件傳遞 CustomEvent

經過了一週的時間,與前幾篇文章的介紹,對於 Web Component 應該已經有了初步的理解了。我們從如何透過 template 與 Shadow DOM 來...

2025-09-17 ‧ 由 zoey 分享
DAY 9

DAY 9: Web Component 的屬性 Properties 與 Getter & Setter

我們在前面學習到了監聽 attribute(屬性) 來改變元件的狀態或樣式,而除了 HTML 的 attributes 之外,還有另一種傳遞資料給 compon...

2025-09-18 ‧ 由 zoey 分享
DAY 10

Day 10: Web Component 的插槽 Slot

進入第二個元件前,我們先介紹一下 Web Component 的第四個隱藏概念,也就是 slot(插槽)。 什麼是 slot ? 不管是使用原生 JS 還是框架...

2025-09-19 ‧ 由 zoey 分享