lit_form_example.html
· 3.4 KiB · HTML
Brut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit Form Example</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 Lit -->
<script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<!-- 使用自訂元件 -->
<custom-form></custom-form>
<script type="module">
import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
class CustomForm extends LitElement {
// 禁用 Shadow DOM，讓 Tailwind CSS 全域樣式生效
createRenderRoot() {
return this; // 渲染到 Light DOM
}
render() {
return html`
<form class="max-w-md w-full bg-white p-6 rounded-lg shadow-lg">
<!-- Username -->
<label class="block mb-4">
<span class="block text-sm font-medium text-slate-700">Username</span>
<input
type="text"
value="tbone"
disabled
class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
/>
</label>
<!-- Email -->
<label class="block mb-4">
<span class="block text-sm font-medium text-slate-700">Email</span>
<input
type="email"
placeholder="yourname@example.com"
class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
/>
</label>
<!-- Password -->
<label class="block mb-4">
<span class="block text-sm font-medium text-slate-700">Password</span>
<input
type="password"
placeholder="Enter your password"
class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
/>
</label>
<!-- Submit Button -->
<button
type="submit"
class="mt-4 w-full bg-sky-500 hover:bg-sky-600 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-400"
>
Submit
</button>
</form>
`;
}
}
customElements.define('custom-form', CustomForm);
</script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit Form Example</title> |
| 7 | <!-- 引入 Tailwind CSS --> |
| 8 | <script src="https://cdn.tailwindcss.com"></script> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
| 11 | </head> |
| 12 | <body class="bg-gray-100 flex items-center justify-center min-h-screen"> |
| 13 | <!-- 使用自訂元件 --> |
| 14 | <custom-form></custom-form> |
| 15 | |
| 16 | <script type="module"> |
| 17 | import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; |
| 18 | |
| 19 | class CustomForm extends LitElement { |
| 20 | // 禁用 Shadow DOM，讓 Tailwind CSS 全域樣式生效 |
| 21 | createRenderRoot() { |
| 22 | return this; // 渲染到 Light DOM |
| 23 | } |
| 24 | |
| 25 | render() { |
| 26 | return html` |
| 27 | <form class="max-w-md w-full bg-white p-6 rounded-lg shadow-lg"> |
| 28 | <!-- Username --> |
| 29 | <label class="block mb-4"> |
| 30 | <span class="block text-sm font-medium text-slate-700">Username</span> |
| 31 | <input |
| 32 | type="text" |
| 33 | value="tbone" |
| 34 | disabled |
| 35 | class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 |
| 36 | focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 |
| 37 | disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none |
| 38 | invalid:border-pink-500 invalid:text-pink-600 |
| 39 | focus:invalid:border-pink-500 focus:invalid:ring-pink-500" |
| 40 | /> |
| 41 | </label> |
| 42 | |
| 43 | <!-- Email --> |
| 44 | <label class="block mb-4"> |
| 45 | <span class="block text-sm font-medium text-slate-700">Email</span> |
| 46 | <input |
| 47 | type="email" |
| 48 | placeholder="yourname@example.com" |
| 49 | class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 |
| 50 | focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 |
| 51 | invalid:border-pink-500 invalid:text-pink-600 |
| 52 | focus:invalid:border-pink-500 focus:invalid:ring-pink-500" |
| 53 | /> |
| 54 | </label> |
| 55 | |
| 56 | <!-- Password --> |
| 57 | <label class="block mb-4"> |
| 58 | <span class="block text-sm font-medium text-slate-700">Password</span> |
| 59 | <input |
| 60 | type="password" |
| 61 | placeholder="Enter your password" |
| 62 | class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 |
| 63 | focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 |
| 64 | invalid:border-pink-500 invalid:text-pink-600 |
| 65 | focus:invalid:border-pink-500 focus:invalid:ring-pink-500" |
| 66 | /> |
| 67 | </label> |
| 68 | |
| 69 | <!-- Submit Button --> |
| 70 | <button |
| 71 | type="submit" |
| 72 | class="mt-4 w-full bg-sky-500 hover:bg-sky-600 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-400" |
| 73 | > |
| 74 | Submit |
| 75 | </button> |
| 76 | </form> |
| 77 | `; |
| 78 | } |
| 79 | } |
| 80 | |
| 81 | customElements.define('custom-form', CustomForm); |
| 82 | </script> |
| 83 | </body> |
| 84 | </html> |
| 85 |