spx-morph
Controls DOM morphing operations and will be referenced during DOM diffing. The spx-morph attribute is only available when using the morph renderer. For each page render taking place, SPX will execute tree traversal and swap dirty (changed) nodes. DOM Morphs are a powerful capability and allow SPX to achieve measurable performance gains between navigations. The spx-morph attribute allows for seamless swaps to take place and ensures that each render operation concludes according to expectation.
Tags
The spx-morph attribute can be annotated on target elements contained within <body> but cannot be applied to link targets.
Values
This attribute is a string type which accepts one of the following values:
attrstextchildrenpreserve
attrs
Passing a value of attrs instructs SPX to apply morphs to the containing element only.
children
Passing a value of children instructs SPX to apply morphs to descendent nodes of the annotated element, while preserving the element containing the attribute. This is helpful when you require morphs to apply exclusively to child nodes. If you are using a framework like Stimulus this may be required to apply on controllers.
Example
In the below example, we will assume the that data-attr value will change on page 2, but because we have annotated the element with spx-morph="children" the attributes will not be touched, only the descendent nodes will morph.
preserve
Passing a value of preserve instructs SPX to skips morphs on the containing elements and all of its descendent nodes. Using preserve annotations will persist contents between navigations, regardless if inner contents has changed.
Example