Vue Teleport defer — target-timing playground

<div class="pg">
  <div class="pg-title">Vue Teleport <code>defer</code>: the target-timing bug</div>
  <p class="pg-sub">
    A real Vue 3.5.44 app, remounted fresh on every click. In one render tree,
    <strong>&lt;ModalTrigger&gt;</strong> (owns the Teleport) sits <strong>before</strong>
    <strong>&lt;div id="modal-root"&gt;</strong> (the target) — the exact <code>AppShell</code>
    shape from the article. Toggle <code>defer</code> and watch the real target lookup.
  </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Configure the Teleport</div>
      <div class="seg-wrap">
        <label class="toggle">
          <input type="checkbox" id="toggle-defer" />
          <span class="switch"></span>
          <code>defer</code> on the Teleport
        </label>
      </div>
      <p class="hint" style="margin-top:8px">
        Template order never changes: <code>&lt;ModalTrigger/&gt;</code> mounts before
        <code>&lt;div id="modal-root"&gt;</code> in every run — only <code>defer</code>
        changes whether that matters.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Mount the app</div>
      <div class="btn-row">
        <button class="btn primary" id="btn-mount">▶ Mount fresh app</button>
        <button class="btn ghost" id="btn-reset">Reset</button>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot" id="status-dot"></span>
        <span id="status-text">Not mounted yet — click "Mount fresh app".</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The real component tree, as rendered</div>
      <div class="stage">
        <div id="stage-mount"><span class="hint" style="margin:0">Click "Mount fresh app" above.</span></div>
      </div>
      <p class="order-note">
        <code>#modal-root</code> above is a real DOM node Vue itself created and wrote to —
        not a drawing of one.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Vue's own console output</div>
      <p class="hint" style="margin-top:0">
        Captured live from the real <code>console.warn</code> calls Vue's dev build makes —
        this is the actual warning text, not a paraphrase.
      </p>
      <div class="log" id="log" aria-live="polite"></div>
    </div>

</div>
</div>

preview

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