text:

Writes one reactive value into the element’s own DOM text: a real text node, never HTML.

Syntax

text: <string> | <number> | <keyword> | var(<state>) | previous(<state>) | direction(<state>) | when(…);

registry syntax: text: <string> | <number> | var(--state) | previous(--state) | direction(--state) | when(condition, a, b)

Parameters

valueone scalarrequired

A literal, var(), previous(), direction() or when() (a native if() also works). Other functions are compile errors.

Effect

No value. The element’s text node is set with Text.data: selectable, copyable and in the accessibility tree.

Example

@property --delta { syntax: "<integer>"; inherits: true; initial-value: 0; }.score { --points: state(0); --delta: calc(var(--points) - previous(--points)); }.score .current { text: var(--points); }.score .prev    { text: previous(--points); }.score .delta   { text: var(--delta); }.score:when(direction(--points) > 0) .direction { text: "▲ up"; }

Behavior

• 0.9. The new form is content: .v { content: var(--n); }, under its eligibility rules. text: keeps working in 0.9, and it is still the way to write a literal string as DOM text.
• The cascade picks the winning text: declaration per element, like any property (it compiles to a registered, non-inherited --rcss-text).
• When no declaration applies (rule unmatched, condition false, sheet removed), the original HTML text is restored, so the markup is the fallback before the script runs.
• If something else changes the text or the children, the binding yields with a diagnostic and never writes again.
• Updated in the late phase of the frame, after state, previous() and :when() are current.
• For numbers from math, register the property with @property so the browser computes it, then read it with var().

Supported contexts

• Elements that are empty or hold exactly one text node. Elements with child elements are never touched.
• Trusted stylesheets only, like on: and bind:.

Limitations

• One value per element: not a template language.
• A value that is not one scalar (two strings, an unresolved calc()) is reported and not shown.
• Never parses HTML.

Related