Declarative Shadow DOM — the parse-time race

<div class="pg">
    <h1 class="pg-title">🎮 Declarative Shadow DOM: the parse-time race</h1>
    <p class="pg-sub">
      Pick a JavaScript delay, hit run, and watch two ways of building the "same"
      web component. One waits on <code>&lt;script&gt;</code> to attach its Shadow
      DOM. The other's shadow root is already there — because the HTML parser
      attached it, not JavaScript.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field">
        <label class="ctl-label" for="delay">Simulated JS delay: <span id="delayLabel" class="mono">400ms</span></label>
        <input type="range" id="delay" min="0" max="3000" step="100" value="400" />
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn primary" id="run">▶ Run page load</button>
        <button class="btn ghost" id="reset">Reset</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="neverLoads" />
          <span class="switch"></span>
          <span>Script never loads (e.g. blocked, crashed)</span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="0">Fast connection (0ms)</button>
        <button class="btn sm" data-preset="600">Typical mobile (600ms)</button>
        <button class="btn sm" data-preset="2500">Slow / janky main thread (2500ms)</button>
      </div>
      <p class="hint">The slider only controls the <strong>imperative</strong> panel's script. The declarative panel never reads it — that's the whole point.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — two "SSR'd" components, loaded at the same time</div>
      <div class="split">
        <div class="frame-box">
          <div class="frame-head">
            Imperative <span class="tag">attachShadow() in &lt;script&gt;</span>
          </div>
          <iframe class="demo-frame" id="frameImperative" title="imperative shadow dom demo"></iframe>
          <div class="frame-status">
            <span class="dot" id="dotImperative"></span>
            <span>Shadow content visible at: <span class="ms" id="msImperative">—</span></span>
          </div>
        </div>
        <div class="frame-box">
          <div class="frame-head">
            Declarative <span class="tag">&lt;template shadowrootmode&gt;</span>
          </div>
          <iframe class="demo-frame" id="frameDeclarative" title="declarative shadow dom demo"></iframe>
          <div class="frame-status">
            <span class="dot" id="dotDeclarative"></span>
            <span>Shadow content visible at: <span class="ms" id="msDeclarative">—</span></span>
          </div>
        </div>
      </div>
      <p class="hint" id="verdict" style="margin-top:12px">Set a delay and click "Run page load" to start the race.</p>
    </div>
  </div>

const delayInput = $("delay");
  const delayLabel = $("delayLabel");
  const neverLoads = $("neverLoads");

delayInput.addEventListener("input", () => {
    delayLabel.textContent = delayInput.value + "ms";
  });

document.querySelectorAll("[data-preset]").forEach((btn) => {
    btn.addEventListener("click", () => {
      neverLoads.checked = false;
      delayInput.value = btn.dataset.preset;
      delayLabel.textContent = btn.dataset.preset + "ms";
    });
  });

preview

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