:user-invalid vs :invalid — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 :invalid vs :user-invalid</h1>
    <p class="pg-sub">
      Two required email fields, styled two different ways. Type in each, then hit
      <strong>Reset form</strong> and watch what comes back red — and what doesn't.
    </p>

<div class="banner info" id="unsupportedBanner" hidden>
      Your browser doesn't support <code>:user-invalid</code> yet — Field B's border
      won't react, but the status readout below still tells you what would happen.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Two fields, both required</div>
      <form id="demoForm" novalidate="false">
        <div class="fields">
          <div class="field-card">
            <h3>Field A — the naive rule</h3>
            <span class="tag">.naive:invalid { border-color: red; }</span>
            <input class="naive" type="email" required placeholder="you@example.com" id="fieldA" />
          </div>
          <div class="field-card">
            <h3>Field B — the native fix</h3>
            <span class="tag">.native:user-invalid / :user-valid</span>
            <input class="native" type="email" required placeholder="you@example.com" id="fieldB" />
          </div>
        </div>
        <div class="btn-row" style="margin-top:16px">
          <button class="btn primary" type="button" id="attemptSubmit">Attempt submit</button>
          <button class="btn ghost" type="reset" id="resetBtn">Reset form</button>
        </div>
        <p class="hint">
          "Attempt submit" calls <code>reportValidity()</code> — the same check a real
          submit runs, without leaving the page. It's the other way (besides typing)
          to trigger the interaction both pseudo-classes are waiting for.
        </p>
      </form>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What's actually matching, live</div>
      <div class="readout">
        <div class="readout-row">
          <span class="who">Field A</span>
          <span class="dot" id="dotA"></span>
          <span class="val" id="statusA">—</span>
        </div>
        <div class="readout-row">
          <span class="who">Field B</span>
          <span class="dot" id="dotB"></span>
          <span class="val" id="statusB">—</span>
        </div>
      </div>
      <p class="hint" id="hintText">
        Nobody has touched either field yet — Field A is already invalid on its own (look at its border).
        Type into Field B, then click or tab out of it: that first "leaving the field" is what unlocks it.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.