Style Query With Custom Property Value — Children React to Parent State

CSS Variables As Component State

Style queries pair beautifully with CSS custom properties to express component state without touching markup. Set a variable on the parent, and children update.

Basic Pattern

.notification-host {
  --severity: "info";
}

.notification-host[data-severity="warning"] { --severity: "warning"; }
.notification-host[data-severity="error"]   { --severity: "error"; }

@container style(--severity: "info") {
  .notification {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
  }
  .notification-icon::before { content: "ℹ"; }
}

@container style(--severity: "warning") {
  .notification {
    border-color: orange;
    background: color-mix(in srgb, orange 10%, transparent);
  }
  .notification-icon::before { content: "⚠"; }
}

@container style(--severity: "error") {
  .notification {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 10%, transparent);
  }
  .notification-icon::before { content: "✕"; }
}

What Makes This Powerful

Toggling a single attribute on the host (data-severity) ripples through every nested element that has rules inside an @container style(...) block. You don't need:

• Per-element class toggles
• A JavaScript framework to propagate state
• Repeated CSS selectors targeting child elements directly

Theme Switching

.theme-root { --theme: "light"; }
.theme-root.dark { --theme: "dark"; }

@container style(--theme: "dark") {
  .panel { background: #1a1a1a; color: #f5f5f5; }
  .panel-link { color: #87ceeb; }
}

A single class toggle on the root drives an unlimited number of child styles.

Browser Support and Caveats

• Chrome 111+, Safari 18+, Firefox 128+ for custom property style queries.
• Querying built-in properties (e.g., background-color) is not yet broadly supported — stick to --variables.
• Style queries don't trigger layout themselves but the styles they apply might.

Combining With Size Queries

@container (min-width: 500px) and style(--severity: "error") {
  .notification {
    padding-block: 1.25rem;
    font-size: 1.05rem;
  }
}

Logical AND between size and style conditions is supported and useful for combining "the panel is wide AND in error state".