Local state and directives
Bind text, attributes, and visibility
Use x-text, x-bind, x-show, and x-cloak according to whether content, attributes, or display should change.
9 minute lesson
The board updates a result count, binds aria-expanded, hides a panel, and prevents pre-initialization flicker. That contrast gives us something useful to test instead of a rule to memorize.
Different directives change different parts of the DOM; choosing the right one keeps the HTML readable and predictable. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.
The happy path can hide a bad design: you can use x-html for plain text or hide inaccessible state only with CSS and still get one successful demo. Push past the demo. prefer text binding for text, bind semantic attributes with state, and coordinate visual and accessibility state, then test the condition most likely to prove the choice wrong.
The module is moving toward one outcome: Add a small local behavior to useful HTML without turning the whole page into a client application. Save the before-and-after evidence now; it will make the final project review much more honest.
Build one disclosure and inspect its text, hidden state, and accessibility attributes before and after interaction. Save the evidence, then explain which requirement would force you to choose a different design.
Lesson completed