86 lines
3.4 KiB
HTML
86 lines
3.4 KiB
HTML
<!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>
|
||
|