When Utility
The when helper is Markup out of the box utility to do conditional rendering in or outside templates.
It mimics an if-and-else statement with the else being conditional.
javascript
1const visible = true2 3html` <p>${when(visible, `visible`, `hidden`)}</p> `Condition
The condition is the first argument and it can be a static value or a function for something that will change like a StateGetter.
javascript
1const [visible, updateVisible] = state(true)2 3html` ${when(visible, html`<p>visible</p>`, html`<p>hidden</p>`)} `The when helper will re-evaluate whenever the condition changes for an accurate render.
Then & else
The second argument is required and represent the "then" value while the third argument is optional since it represent the "else" body.
javascript
1const [visible, updateVisible] = state(true)2 3html`${when(visible, html`<p>visible</p>`)}`