在我初學 Vanilla JS 時，並沒有特別意識到 元件化 的概念，直到接觸了 React 和 Angular，才開始頻繁地接觸到 component 這個詞。
我還傻傻以為元件是框架才有的概念，後來才發現，其實瀏覽器本身早就提供了一套原生的元件化能力 —— 也就是 Web Component。

Web Component 是什麼？

Web Component 是一組標準化的瀏覽器 API

Web Component 是一組標準化的瀏覽器 API（經由 W3C 與各大瀏覽器共同制定的 Web 標準）。
讓開發者可以自訂 HTML 標籤，並封裝樣式、邏輯與結構，不依賴任何框架也能運作。
這個概念最早是由 Google 在 2011 年提出，直到 2018 年左右，主流瀏覽器全面支援後，才真正邁入實用階段。
Web Component 其實慢慢被廣泛應用在開發過程中，成為 Vanilla JS 的元件化方案。

重要的是，不需要任何框架也能運作。

可以到 "Can I use" ，查查看目前的支援度，其實已經有 95% 以上瀏覽器都支援了（IE 就讓我們先忽略他吧 XD）。

Web Component 可以取代框架嗎？

其實我在查找 Web Component 相關資料及相關影片時，總是會看到有人將 Web Component 與框架做比較。
但是在我的理解下，我認為 Web Component 並不是要取代框架，而是想要 彌補框架不足的元件共享能力。

為什麼我會這樣說呢？

主要是因為 Web Component 還無法達到像是框架那樣有效的狀態管理，且開發體驗上也還不像成熟的框架那樣好。（真正開始實作會覺得眼花撩亂）。
但是使用 Web Component 開發的元件可以在 React、Vue、Angular 或 Vanilla JS 中使用，所以可以讓不同框架之間能夠更好地彼此合作，利用小小的共享元件，來增加開發的效率。

初步介紹 Web Component 的三個核心：

• Custom Elements 自訂標籤
• Shadow DOM 隔離保護
• HTML Templates 可重用模板

Custom Elements （自定義的標籤）

創建自己的 HTML 標籤

• 可以定義自己的 HTML 元素，像 <aespa-button> 或 <blackpink-card>
• 可以有自己的屬性和方法
• 在使用上就像使用一般的標籤 <div> 或 <span> 一樣

Shadow DOM （元件的隔離保護）

像是小孩子把門鎖起來，你看得到門，可是你看不到他在裡面做什麼

• 提供元件的隔離保護
• 創建一個隱藏的 DOM 區域
• 裡面的 CSS 和 JavaScript 不會污染到外面
• 外面的樣式也不會干擾裡面，避免衝突

HTML Templates （可重複使用的模板）

• 有點像是 範本，建立一個通用的架構，你可以填入你自訂的內容
• 避免重複寫相同的 HTML 結構
• 需要動態生成多個相似元素時可以幫上很大的忙

初步介紹了三個核心，接下來就一起深入學習基礎吧！