ElementInternals — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 ElementInternals: a custom element that joins the form</h1>
    <p class="pg-sub">
      The star widget below is a real custom element (<code>&lt;star-rating&gt;</code>). Click stars,
      toggle <code>required</code> or <code>disabled</code>, then submit — watch what the
      form actually collects.
    </p>

<form class="panel" id="demoForm">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="widget-row">
        <span class="fake-label" id="ratingLabel">Rating:</span>
        <star-rating id="stars" name="rating"></star-rating>
      </div>
      <p class="hint">Click a star to set the value, or click the label — a form-associated custom element is focusable and clickable via its <code>&lt;label&gt;</code> just like a native input.</p>
      <div class="btn-row" style="margin-top:12px">
        <label class="toggle">
          <input type="checkbox" id="requiredToggle" /><span class="switch"></span>
          <span>required</span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="disabledToggle" /><span class="switch"></span>
          <span>disabled</span>
        </label>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button type="button" class="btn primary" id="submitBtn">Submit form</button>
        <button type="button" class="btn ghost" id="resetBtn">Reset form</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button type="button" class="btn sm" data-preset="required-empty">Worked example: required + no rating</button>
        <button type="button" class="btn sm" data-preset="required-filled">Worked example: required + 4 stars</button>
      </div>
    </form>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a rating and submit.</span>
      </div>
      <p class="hint">What <code>new FormData(form)</code> actually contains right now:</p>
      <pre class="code" id="formDataOut">{}</pre>
      <p class="hint">What the widget's <code>ElementInternals</code> reports:</p>
      <pre class="code" id="internalsOut">value: 0, validity: valid</pre>
    </div>
  </div>

preview

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