Lists, transitions, and the DOM
Choose x-show or x-if
Decide whether hidden DOM should remain mounted or be created and destroyed.
9 minute lesson
Start from the behavior you can observe. A frequently opened filter panel stays mounted, while an expensive one-time modal can be inserted only when needed.
x-show toggles display and preserves the subtree; x-if changes whether the subtree exists at all. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.
It is tempting to swap the directives without considering initialization, focus, form values, or third-party widgets. That trades a clear decision for an assumption you will eventually have to debug. The stronger move is to choose from lifecycle and state requirements, then test repeated open and close behavior. Make the boundary explicit in code and in the project notes.
Tie the decision back to the larger job: Render dynamic issue rows without losing identity, focus, or respect for reduced-motion preferences. Record enough evidence that another developer can repeat the result without relying on your memory.
Implement the editor both ways and record the differences in DOM, state, focus, and initialization. Repeat it once with an invalid or hostile condition and write down the boundary the failure revealed.
Lesson completed