timmy revised this gist 10 months ago. Go to revision
No changes
timmy revised this gist 10 months ago. Go to revision
No changes
timmy revised this gist 1 year ago. Go to revision
1 file changed, 46 insertions
lit_cdn_example.html(file created)
| @@ -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> | |
Newer
Older