Plugin Order#

Demo#

Explanation#

Works:
<div data-signals-foo="1" data-text="$foo"></div>

Does not work (throws an error, see the console):
<div data-text="$bar" data-signals-bar="2"></div>

Note that data-* attributes are evaluated in the order they appear in the DOM. Elements are evaluated by walking the DOM in a depth-first manner, and attributes are processed in the order they appear in the element. This means that if you use a signal in a Datastar expression, it must be defined before it is used.

In this example, the data-signals-foo attribute is applied first, then the data-text attribute is applied. This is why the data-text attribute is able to reference the foo signal.