lit_cdn_example.html
· 1.0 KiB · HTML
原始檔案
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit CDN Example</title>
</head>
<body>
<!-- 自定義元件 -->
<simple-greeting name="Lit"></simple-greeting>
<script type="module">
// 從 CDN 導入 Lit
import { LitElement, html, css } from "https://cdn.jsdelivr.net/npm/lit@2.6.1/+esm";
// 定義 SimpleGreeting 元件
class SimpleGreeting extends LitElement {
static properties = {
name: { type: String }, // 定義 name 屬性
};
constructor() {
super();
this.name = 'World'; // 預設屬性值
}
// 定義樣式
static styles = css`
p {
color: blue;
font-size: 20px;
font-family: Arial, sans-serif;
}
`;
// 定義模板
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
// 註冊自定義元素
customElements.define('simple-greeting', SimpleGreeting);
</script>
</body>
</html>
| 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> |
| 47 |