morphdom
library to do the smallest number of DOM modifications necessary to refresh your UI in just a few milliseconds. For many developers, this will be a perfect solution and they can stop reading here.data-reflex-root
attribute.data-reflex-root=".class, #id, [attribute]"
data-reflex-root
on the element with the data-reflex
?data-reflex-root
on an ancestor element with a data-controller
above the element in the DOM? It could be the element's immediate parent, but it doesn't have to be.body
element.[forward],[backward]
we are implicitly telling StimulusReflex to not update the text input itself. This prevents resetting the input value while the user is typing.morphdom
is called with the childrenOnly flag set to true.<body>
or the custom parent selector(s) you specify are not updated. For this reason, it's necessary to wrap anything you need to be updated in a <div>
, <span>
, or other bounding tag so that it can be swapped out without confusion.<a>
.data-reflex-root
attribute to reference itself via a CSS class or other mechanism. Just always remember that the parent itself will not be replaced! Only the children of the parent are modified.data-reflex-permanent
to any element in your DOM, and it will be left unchanged.data-reflex-permanent
will not be morphed in any way.