demo · v131

i18n string tokens in a registered <string>

Component CSS often embeds short strings — "Required", "Add another", "Show more" — via ::after { content: "Required" }. Swap the user's language and the labels stay English. Registering each label as a <string> property lets a locale class override the whole component without touching its CSS. Pick a locale and watch the form reflow.

the api

@property --label-required {
  syntax: "<string>";
  inherits: true;
  initial-value: "Required";
}

/* a locale class overrides the whole sub-tree */
.locale-fr {
  --label-required: "Obligatoire";
  --label-optional: "Facultatif";
}

/* component CSS pulls from the variable */
label::after { content: " — " var(--label-required); }

see also