Refs
Demo
I'm a div that is getting referenced
Stuff in store
Explanation
<div>
<div data-ref="foo">I'm a div that is getting referenced</div>
<div data-text="`I'm using content of '${(~foo).innerHTML}'`"></div>
</div>
By adding data-ref="foo"
to an element, you can reference it in other Datastar attribute expressions. It automatically creates a valid selector that can be used in other actions on the page.
Note: The parentheses around ~foo
are required to ensure that the reference is properly evaluated. We can’t discern between a property and a nested signal without them.
Note: Every element that has any Datastar plugins associated with it will automatically create an id
attribute if it doesn’t already have one. This is to ensure that the element can be referenced in cleanup steps.