@scope — native CSS style scoping

<div class="pg">
    <h1 class="pg-title">🔒 @scope — draw the boundary yourself</h1>
    <p class="pg-sub">
      <code>@scope</code> keeps CSS where you put it, with no BEM naming and no build step.
      Pick a selector strategy below and watch which <code>.title</code> elements it styles.
      The CSS you build is <strong>really injected into this page</strong> — the verdicts are
      measured with <code>getComputedStyle</code>, not faked.
    </p>

<div class="banner" id="support">
      ⚠️ This browser doesn't support <code>@scope</code> (needs Chrome 118+, Firefox 128+, or
      Safari 17.4+). The <code>@scope</code> option below will style <em>nothing</em> — which is
      exactly the graceful degradation the post describes.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a strategy, then draw the boundary</div>

<div class="wrap-controls">
        <div class="field">
          <span class="ctl-label">Selector strategy</span>
          <div class="seg" id="modeSeg">
            <button data-mode="plain" aria-pressed="false">.title</button>
            <button data-mode="desc" aria-pressed="false">.card .title</button>
            <button data-mode="scope" aria-pressed="true">@scope (.card)</button>
          </div>
        </div>
        <div class="field">
          <span class="ctl-label">Lower boundary</span>
          <label class="toggle">
            <input type="checkbox" id="limit" /><span class="switch"></span>
            <span>stop at <span class="mono">.testimonial</span></span>
          </label>
        </div>
      </div>

<div class="presets" style="margin-top:16px">
        <button class="btn sm" data-preset="leak">😱 The leak</button>
        <button class="btn sm" data-preset="bem">The BEM-era way</button>
        <button class="btn sm" data-preset="scoped">✅ Scoped with a boundary</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The CSS you just wrote</div>
      <div class="code" id="cssOut"></div>
      <p class="hint" id="cssHint"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What it actually styled</div>

<div class="page" id="tree">
        <span class="tag">.page</span>
        <div class="ti">
          <div class="title">Page heading</div>
          <span class="loc">outside the card</span>
          <span class="pill">—</span>
        </div>

<div class="card">
          <span class="tag">.card</span>
          <div class="ti">
            <div class="title">Card title</div>
            <span class="loc">.card &rsaquo; .header</span>
            <span class="pill">—</span>
          </div>
          <div class="ti">
            <div class="title">Section title</div>
            <span class="loc">.card &rsaquo; .body</span>
            <span class="pill">—</span>
          </div>

<div class="testimonial">
            <span class="tag lim">.testimonial &nbsp;— a nested component</span>
            <div class="ti">
              <div class="title">What people say</div>
              <span class="loc">.card &rsaquo; .testimonial</span>
              <span class="pill">—</span>
            </div>
          </div>
        </div>
      </div>

<div class="status" id="status" style="margin-top:13px">
        <span class="dot info" id="dot"></span>
        <span class="tally">
          <span class="big-num" id="count">–</span>
          <span id="statusText">of 4 titles styled.</span>
        </span>
      </div>
      <p class="hint" id="hint"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Bonus: proximity is a tiebreaker, not a trump card</div>
      <p class="hint" style="margin:0 0 13px">
        Two scopes both style <span class="mono">.button</span>. The one whose scoping root is
        <em>closest</em> wins — but only when specificity ties. In the cascade, scope proximity sits
        <strong>below</strong> specificity, so raising the far rule's specificity takes the win back.
      </p>

<div class="btn-row" style="margin-bottom:14px">
        <label class="toggle">
          <input type="checkbox" id="inSidebar" checked /><span class="switch"></span>
          <span>button lives inside <span class="mono">.sidebar</span></span>
        </label>
      </div>
      <div class="btn-row" style="margin-bottom:14px">
        <label class="toggle">
          <input type="checkbox" id="boost" /><span class="switch"></span>
          <span>give the <span class="mono">.page</span> rule 3× the specificity</span>
        </label>
      </div>

<div class="page">
        <span class="tag">.page</span>
        <div class="slot" id="slotPage"></div>
        <div class="sidebar">
          <span class="tag">.sidebar</span>
          <div class="slot" id="slotSide">
            <button class="button" id="pbtn" type="button">Click me</button>
          </div>
        </div>
      </div>

<div class="btn-row" style="margin-bottom:20px">
      <button class="btn ghost" id="reset">↺ Reset everything</button>
    </div>
  </div>

preview

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