入力し終えてから初めてエラーを表示するメール入力欄。:user-invalidと:has()により、JSなしで「入力前に怒らない」検証UIを作ります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
:invalid はページ表示直後の空欄にも一致してしまい「入力前から赤い」フォームになりがちです。:user-invalid はユーザーが操作を終えた（フォーカスを外した）後にだけ一致するため、体験を壊さずに検証結果を出せます。エラーメッセージの表示は、親要素側から .field:has(:user-invalid) で子の状態を参照して切り替えます。正しく入力し直すと :user-valid で緑の枠に変わります。
エラー文はrole="alert"にすると表示された時点でスクリーンリーダーが読み上げます。文言は「何をどう直すか」まで書くのが親切です。
required付きメール入力欄のバリデーション表示を作ってください。:user-invalidで入力後のみエラースタイルを適用し、:has()で親要素からエラーメッセージ（role="alert"）の表示を切り替えてください。JSは使わないでください。