timmy / 使用 Lit 建立 Web Component
0 gustos
0 bifurcaciones
1 archivos
Última actividad 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 gustos
0 bifurcaciones
1 archivos
Última actividad 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> |
timmy / 使用 Lit Web Components 建立精緻部落格文章展示
0 gustos
0 bifurcaciones
1 archivos
Última actividad 10 months ago
這段 HTML + Lit 程式碼建立了一個 動態部落格文章展示元件 <blog-post>，透過 Web Components 技術，使每篇文章可重用並具備獨立的樣式與結構。它包含 標題、作者、日期、內容與「閱讀更多」按鈕，並使用 Animate.css 提供動畫效果，使文章顯示時更流暢。此設計適用於 部落格、新聞平台或內容管理系統（CMS），能夠讓開發者輕鬆擴展與管理文章內容，提升前端開發的模組化與可維護性。
| 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>精緻部落格文章展示</title> |
| 7 | <link |
| 8 | href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" |
| 9 | rel="stylesheet" |
| 10 | /> |
Siguiente
Anterior