Text & Show
Core directives for presentation: ly-text binds content safely and ly-show toggles visibility without altering DOM tree structure.
ly-text — safe text binding
ly-text binds an element's text content to an expression. It sets textContent, which automatically escapes HTML — raw input can never execute as injected markup.
<span ly-text="user.name"></span>
<p ly-text="'Hello, ' + user.name + '!'"></p>
<p ly-text="cart.items.length + ' items'"></p>Live previewlyap
Name:
Escaped text stays safe:
XSS-safe by default: ly-text sets textContent internally, guaranteeing that user-provided strings always render safely as plain text.
ly-show — toggle visibility
ly-show toggles an element's visibility using the hidden property without removing the element from the DOM tree.
<p ly-show="panel.open">This paragraph toggles visibility.</p>
<button ly-on:click="panel.toggle()">Toggle</button>Live previewlyap
Now you see me.
For structural nodes that should be inserted and removed from the DOM entirely, use ly-if instead. See Conditionals & Loops.
ly-show vs ly-if
| ly-show | ly-if | |
|---|---|---|
| Mechanism | Toggles hidden property | Inserts / removes DOM nodes via anchor comment |
| Element in DOM | Yes (retained) | No (cleaned up on false) |
| Best for | Frequent, lightweight toggles | Heavy or conditional template branches |