Photo by [Jason Leung](https://unsplash.com/@ninjason) on [Unsplash](https://unsplash.com/)

Web Components 介紹與實作說明 (2) | 實作一個 Tooltip 元件

先前我們介紹了關於 WebComponents 以及他的三大核心內容,這裡我們要透過一個實際的案例來建立一個 Tooltip UI 元件,來進一步熟悉 WebComponent 的實作方式。 在這篇文章中我們會先在頁面的 html 使用 template,然後定義一個 CustomElement 來簡單實作 WebComponent。 後續在另外的章節,我們會再介紹如何將我們實作的 WebComponent 模組化並上傳到 CDN 上供直接使用。 Tooltips 元件 Tooltips 元件是指當滑鼠移到特定網頁元件上,上方或指定方向會跳出一個泡泡提示窗並帶有提示內容文字或是 HTML 內容,可參考下圖: 圖片來源: 維基百科 元件設計 在實作一個 Tooltips,我們會希望: 可以在指定元件上方出現泡泡。 泡泡內可以帶入指定文字或 HTML。 泡泡提示窗可以帶一個箭頭指向指向目標內容元件。 當泡泡提示窗在網頁邊緣顯示時,可以自動往網頁中心內縮,避免超出網頁內容區。 那要使用 WebComponent Custom Elements 來實作 Tooltips 元件,我們先假定實作的 html tag 叫做 my-tooltip,如果要在一個圖片上加上提示窗,希望語法會是: 1 2 3 4 <my-tooltip alt="這是一張圖片"> <div n></div> <img src="a.jpg" /> </my-tooltip> 而希望畫面呈現出來會像這樣: 而如果要使用 HTML 當作提示窗的內容,則希望語法會是像這樣: 1 2 3 4 5 6 7 8 9 <my-tooltip> <!...

December 16, 2023 · 3 min
Photo by [Taras Shypka](https://unsplash.com/@bugsster) on [Unsplash](https://unsplash.com/)

Web Components 介紹與實作說明 (1)

介紹 Angular Components、ReactJS Components、VueJS Components 通通都有,就是沒有屬於 VanillaJS 的 Components,所以今後只好自己創造 (大誤)。 其實早在 2011 年, Web Components 的概念就已經被提出,除了希望可以建立重複使用的 Web UI 元件外,也帶入了封裝的概念,如透過 Shadow DOM 的引入以封裝 Custom Element 的 CSS 樣式,避免互相污染,另外透過 Custom Element 中自定義的行為來達到功能上的封裝與重用性。 上面提到 Shadow DOM 、 Custom Elements,另外還有 HTML Template 為 Web Components 主要的三個核心內容,以下我們就分別介紹這三項核心內容。 Custom elements Custom elements 透過原生 JavaScript APIs 來自定義客製化 HTML 標籤,包含它的 attributes、properties與 events 等,方便依照網站設計的客製化需求來使用。 1 2 3 4 5 6 class MyCustomElement extends HTMLElement { ... } // 定義 Custom element window....

November 29, 2023 · 4 min