lit_card_example.html
· 1.4 KiB · HTML
Ham
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit 模組範例</title>
<script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script>
</head>
<body>
<my-card title="歡迎訊息" content="這是一張使用 Shadow DOM 的卡片。"></my-card>
<style>
/* 這個樣式不會影響 Shadow DOM 內的元素 */
p {
color: red;
font-size: 24px;
}
</style>
<p>這是頁面上的一般段落，樣式不會影響到卡片內容。</p>
<script type="module">
import { LitElement, html, css } from 'lit';
class MyCard extends LitElement {
// 定義樣式
static styles = css`
.card {
border: 1px solid #ccc;
border-radius: 4px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
font-size: 18px;
}
p {
color: #666;
font-size: 14px;
}
`;
// 定義屬性
static properties = {
title: { type: String },
content: { type: String },
};
// 元件渲染模板
render() {
return html`
<div class="card">
<h2>${this.title}</h2>
<p>${this.content}</p>
</div>
`;
}
}
customElements.define('my-card', MyCard);
</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 模組範例</title> |
| 7 | <script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script> |
| 8 | </head> |
| 9 | <body> |
| 10 | |
| 11 | <my-card title="歡迎訊息" content="這是一張使用 Shadow DOM 的卡片。"></my-card> |
| 12 | |
| 13 | <style> |
| 14 | /* 這個樣式不會影響 Shadow DOM 內的元素 */ |
| 15 | p { |
| 16 | color: red; |
| 17 | font-size: 24px; |
| 18 | } |
| 19 | </style> |
| 20 | |
| 21 | <p>這是頁面上的一般段落，樣式不會影響到卡片內容。</p> |
| 22 | |
| 23 | <script type="module"> |
| 24 | import { LitElement, html, css } from 'lit'; |
| 25 | |
| 26 | class MyCard extends LitElement { |
| 27 | // 定義樣式 |
| 28 | static styles = css` |
| 29 | .card { |
| 30 | border: 1px solid #ccc; |
| 31 | border-radius: 4px; |
| 32 | padding: 16px; |
| 33 | margin: 16px; |
| 34 | font-family: Arial, sans-serif; |
| 35 | } |
| 36 | h2 { |
| 37 | color: #333; |
| 38 | font-size: 18px; |
| 39 | } |
| 40 | p { |
| 41 | color: #666; |
| 42 | font-size: 14px; |
| 43 | } |
| 44 | `; |
| 45 | |
| 46 | // 定義屬性 |
| 47 | static properties = { |
| 48 | title: { type: String }, |
| 49 | content: { type: String }, |
| 50 | }; |
| 51 | |
| 52 | // 元件渲染模板 |
| 53 | render() { |
| 54 | return html` |
| 55 | <div class="card"> |
| 56 | <h2>${this.title}</h2> |
| 57 | <p>${this.content}</p> |
| 58 | </div> |
| 59 | `; |
| 60 | } |
| 61 | } |
| 62 | |
| 63 | customElements.define('my-card', MyCard); |
| 64 | </script> |
| 65 | |
| 66 | </body> |
| 67 | </html> |
| 68 |