demo · v131

@property <string> syntax

A custom property registered with syntax: "<string>" is a typed string with proper inheritance, initial value, and transition support. Type into the field and watch the badge update by way of a CSS variable, not a DOM mutation.

Pull quote sample

the css

@property --label {
  syntax: "";
  inherits: false;
  initial-value: "Draft";
}
.card::after { content: var(--label); }

see also