timmy / 使用 Lit 建立 Web Component
0 Lajky
0 Forky
1 Soubory
Naposledy aktivní 10 months ago
這段 HTML 結合 Lit（透過 CDN 載入），建立了一個自訂 Web 元件 <simple-greeting>，用於 顯示問候語。該元件支援 name 屬性，可動態變更顯示的名稱，並透過 LitElement 定義樣式與繪製邏輯。這適用於 前端 UI 元件開發、動態內容繪製，並展示了如何使用 Web Components 來構建 可重用、獨立且輕量的前端元件。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit CDN Example</title> |
| 7 | </head> |
| 8 | <body> |
| 9 | <!-- 自定義元件 --> |
| 10 | <simple-greeting name="Lit"></simple-greeting> |
timmy / 使用 Lit 建立具 Shadow DOM 的自訂元件
0 Lajky
0 Forky
1 Soubory
Naposledy aktivní 10 months ago
這段 HTML + Lit 程式碼建立了一個 自訂 Web Component <my-card>，用於顯示 標題 (title) 和內容 (content) 的卡片元件，並透過 Shadow DOM 確保內部樣式與外部頁面樣式相互隔離。它示範了 如何使用 Lit 定義 Web Components，並確保內部 CSS 只影響元件本身，適用於 可重用 UI 元件開發、獨立樣式管理、提升前端模組化，讓開發者能更輕鬆建立可組合的 UI 元件。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit 模組範例</title> |
| 7 | <script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script> |
| 8 | </head> |
| 9 | <body> |
Novější
Starší