CSS Custom Highlight API — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The highlight that deletes your selection</h1>
    <p class="pg-sub">
      Highlight a word, select some text yourself, then simulate a live update — and watch what
      happens to your selection under each method. That difference is the whole post.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Step 1 — pick what to highlight</div>
      <div class="btn-row">
        <input id="query" type="text" placeholder="Search for a word…" class="code" style="flex:1; min-width:160px; padding:8px 10px;" />
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <div class="seg" id="mode">
          <button data-mode="new" aria-pressed="true">CSS Custom Highlight API</button>
          <button data-mode="old" aria-pressed="false">innerHTML + &lt;mark&gt; (the old way)</button>
        </div>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="highlight">Search: "highlight"</button>
        <button class="btn sm" data-preset="text">Search: "text"</button>
        <button class="btn sm" data-preset="selection">Search: "selection"</button>
      </div>
      <p class="hint" id="unsupported" hidden>
        Your browser doesn't support the CSS Custom Highlight API yet (needs Chrome/Edge 105+, Safari 17.2+, or Firefox 140+).
        Switch to the old-way mode to see the bug it fixes.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Step 2 — select some text, then simulate a live update</div>
      <p class="hint">Drag-select a few words below with your mouse. Don't click anything else — instead, click the button underneath the paragraph. It stands in for "an unrelated feature on the page just re-rendered."</p>
      <div class="stage" id="stage"></div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="simulate">🔁 Simulate a live update</button>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Select some text above, then click the button.</span>
      </div>
      <div class="selbox" style="margin-top:8px">
        <span class="val">selection before: <span id="before">—</span></span>
        <span class="val">selection after: <span id="after">—</span></span>
      </div>
      <p class="hint" id="caption">
        In <strong>CSS Custom Highlight API</strong> mode, the re-render paints via <code>CSS.highlights</code> —
        no DOM node ever moves, so your selection survives it.
      </p>
    </div>
  </div>

preview

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