[筆記] 用 Svelte 製作 UI 元件前要先知道的 Shadow DOM 和 Custom Element

章節連結

在使用 Svelte 製作 UI 元件輸出時,會用到 custom element 以及 shadow DOM 這兩個 Web Components。它能夠讓你所製作出的 Web Component 得以封裝起來,免除載入頁面本身的 HTML, CSS 和 JS 影響。
svelte logo


知識點

1. 在 shadow DOM root 以外大多數 CSS 樣式,是無法更動到內部的 CSS 的。( root, body 標籤上的一些通用設定除外 )
2. 原生的 html 元件如 <input> 本身就是一個 shadow DOM
3. 在 IE 瀏覽器已於 2022 年退役後,多數主流瀏覽器(桌機、移動端)都已支援 shadow DOM ,可安心使用


參考資料

1. Shadow DOM :獨立的Web組件

按讚加入粉絲團

延伸閱讀