demo · v131

Themeable label slot via --component-label

The use case: a design-system card component that wants to display a small badge sourced from a CSS variable — "premium", "beta", "free tier", "deprecated" — settable by the consumer per-theme, with proper cascade and inheritance. Pre-131 you used --label: "x" but the value wasn't typed and inheritance was unreliable. Post-131 @property <string> makes it a proper typed CSS variable.

.theme-a

premium tier

Pricing card — inherits the tier label from its theme container.
.theme-b

free tier

Same component, different theme parent. The badge text follows.
.theme-c (interactive)

custom theme

This panel's label is bound to the input above.

the css

@property --component-label {
  syntax: '<string>';
  inherits: true;
  initial-value: "default";
}

.theme-a { --component-label: "premium"; }
.theme-b { --component-label: "free tier"; }

.card::before {
  content: var(--component-label);
}

see also