🎮 CSS Style Queries in action

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.

1 Choose a severity

JS runs exactly one line: container.style.setProperty('--severity', value). Everything after that is CSS.

2 The alert component reacts

Info

Style queries read the --severity custom property on the container ancestor and apply styles to every child — icon, title colour, background — without any JavaScript touching the child elements.

3 What's happening in the CSS

.demo-root { --severity: neutral }

4 CSS vs JavaScript — the difference

JS approach Class toggling

// 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; }

CSS approach Style queries

// JS sets ONE custom property
container.style.setProperty(
  '--severity', value
);

// CSS reads it — no class needed
@container style(--severity: error) {
  .alert { border-color: red; }
}

With the CSS approach, adding a new child element means one new @container style() rule — you never touch the JavaScript.