datastar/site/static/md/examples/plugin_order.md

Plugin Order

Demo

Works:

Does not work:

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.