Lit Web Component: Interactive Toggle Switch Prompt Example
CODE PREVIEW
Prompt
Create an interactive toggle switch web component using Lit that demonstrates reactive properties, event handling, and styling with CSS custom properties. The component should have a smooth animation when toggled and emit custom events.
このチュートリアルでは、Litを使用して再利用可能でインタラクティブなトグルスイッチWebコンポーネントを作成する方法を実演します。Litは、宣言的なテンプレート構文を使用して高速でリアクティブなWebコンポーネントを構築するための軽量ライブラリです。
実装されている主な機能：
- リアクティブプロパティ: 型宣言と属性へのリフレクションを備えたLitのリアクティブプロパティシステムを使用
- カスタムイベント: スイッチの状態が変化したときにカスタム’toggle-change’イベントを発行
- CSSカスタムプロパティ: カスタマイズ可能なスタイリングとテーマ設定のためにCSS変数を使用
- アクセシビリティ: 適切なARIA属性とキーボードナビゲーションサポートを含む
- アニメーション: CSSトランジションを使用したスムーズな遷移アニメーション
- サイズバリアント: CSSカスタムプロパティを通じて小、中、大のサイズをサポート
コンポーネントプロパティ：
checked: Boolean – スイッチの初期状態disabled: Boolean – ユーザー操作を無効化color-on: String – ‘オン’状態のカスタムカラーcolor-off: String – ‘オフ’状態のカスタムカラーsize: String – サイズバリアント（’small’、’medium’、’large’）
使用例：
<toggle-switch
checked
color-on="#2196f3"
color-off="#90a4ae"
size="large"
></toggle-switch>Prompt Overview
This prompt instructs an AI coding assistant to build a self-contained toggle switch as a Lit web component, complete with reactive properties, custom event emission, and CSS custom property-based theming. It is an excellent reference for developers learning Lit's declarative rendering model, since a toggle switch is simple enough to understand at a glance yet rich enough to demonstrate the core patterns — property decoration, event dispatching, and encapsulated shadow DOM styling — all in one place.
Use this prompt when you need a reusable, framework-agnostic UI primitive that can drop into any modern front-end stack without dependencies. It is equally useful for onboarding new team members to web components, scaffolding a design system, or quickly prototyping an accessible form control. For best results, run it in ChatGPT, Claude, or GitHub Copilot with a TypeScript-aware context. Variations worth trying include adding an ARIA label attribute, supporting a disabled state, or replacing the CSS animation with a configurable transition duration exposed through a custom property.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選