timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 1 year ago. Zu Änderung gehen
1 file changed, 46 insertions
lit_cdn_example.html(Datei erstellt)
| @@ -0,0 +1,46 @@ | |||
| 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> | |
| 11 | + | ||
| 12 | + | <script type="module"> | |
| 13 | + | // 從 CDN 導入 Lit | |
| 14 | + | import { LitElement, html, css } from "https://cdn.jsdelivr.net/npm/lit@2.6.1/+esm"; | |
| 15 | + | ||
| 16 | + | // 定義 SimpleGreeting 元件 | |
| 17 | + | class SimpleGreeting extends LitElement { | |
| 18 | + | static properties = { | |
| 19 | + | name: { type: String }, // 定義 name 屬性 | |
| 20 | + | }; | |
| 21 | + | ||
| 22 | + | constructor() { | |
| 23 | + | super(); | |
| 24 | + | this.name = 'World'; // 預設屬性值 | |
| 25 | + | } | |
| 26 | + | ||
| 27 | + | // 定義樣式 | |
| 28 | + | static styles = css` | |
| 29 | + | p { | |
| 30 | + | color: blue; | |
| 31 | + | font-size: 20px; | |
| 32 | + | font-family: Arial, sans-serif; | |
| 33 | + | } | |
| 34 | + | `; | |
| 35 | + | ||
| 36 | + | // 定義模板 | |
| 37 | + | render() { | |
| 38 | + | return html`<p>Hello, ${this.name}!</p>`; | |
| 39 | + | } | |
| 40 | + | } | |
| 41 | + | ||
| 42 | + | // 註冊自定義元素 | |
| 43 | + | customElements.define('simple-greeting', SimpleGreeting); | |
| 44 | + | </script> | |
| 45 | + | </body> | |
| 46 | + | </html> | |
Neuer
Älter