CSS Style Queries — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 CSS Style Queries in action</h1>
    <p class="pg-sub">
      Pick a severity below. JavaScript sets one custom property on the container —
      then pure CSS style queries update every child element, no class toggling involved.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Choose a severity</div>
      <div class="sev-grid">
        <button class="sev-btn active" data-sev="neutral">Neutral</button>
        <button class="sev-btn" data-sev="info">Info</button>
        <button class="sev-btn" data-sev="success">Success</button>
        <button class="sev-btn" data-sev="warning">Warning</button>
        <button class="sev-btn" data-sev="error">Error</button>
      </div>
      <p class="hint" style="margin-top:10px">
        JS runs exactly one line: <code>container.style.setProperty('--severity', value)</code>.
        Everything after that is CSS.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The alert component reacts</div>
      
      <div class="demo-root" id="demoRoot">
        <div class="demo-alert" role="alert">
          <span class="demo-icon" aria-hidden="true"></span>
          <div>
            <strong class="demo-title" id="alertTitle">Info</strong>
            <p class="demo-msg" id="alertMsg">
              Style queries read the <code>--severity</code> custom property on the container
              ancestor and apply styles to every child — icon, title colour, background — without
              any JavaScript touching the child elements.
            </p>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What's happening in the CSS</div>
      <div class="prop-display">
        <span class="prop-key">.demo-root { --severity:</span>
        <span class="prop-val" id="propVal">neutral</span>
        <span class="prop-key">}</span>
      </div>
      <div class="rule-block" id="ruleBlock" aria-live="polite"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> CSS vs JavaScript — the difference</div>
      <div class="compare-row">
        <div class="compare-box">
          <h3><span class="badge js">JS approach</span> Class toggling</h3>
<pre>// JS reads state, toggles classes
el.classList.remove('error','warning','success');
el.classList.add(severity);

// CSS reacts to classes
.alert.error   { border-color: red; }
.alert.warning { border-color: orange; }
.alert.success { border-color: green; }</pre>
        </div>
        <div class="compare-box">
          <h3><span class="badge css">CSS approach</span> Style queries</h3>
<pre>// JS sets ONE custom property
container.style.setProperty(
  '--severity', value
);

// CSS reads it — no class needed
@container style(--severity: error) {
  .alert { border-color: red; }
}</pre>
        </div>
      </div>
      <p class="hint" style="margin-top:10px">
        With the CSS approach, adding a new child element means one new
        <code>@container style()</code> rule — you never touch the JavaScript.
      </p>
    </div>
  </div>

preview

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