These are the 22 things you write on elements. They are read only inside h-scope. : is short for h-bind, and @ is short for h-on.
A scope starts here. It is mounted wherever and whenever it is inserted into the document. It does not see values from outer scopes. Declare what it receives with h-inherit or h-inject. If the value is a function, it is called with the tools. If it is an async function, the inside is not mounted until it finishes.
Creates a separate reactive value space from that element inward, without creating a scope host. It is not a boundary, so it reads and writes outer values directly. $host, $props and $emit belong to the enclosing h-scope. Use it to give each row of h-for its own values. It takes only an object.
It has meaning only inside h-scope. One that h-if or h-for renders is mounted, but an h-state inserted later on its own is not. Only h-scope and components are mounted when inserted later.
Names to take from the scope one level out. It is a list of names, not an expression. Reads and writes stay linked to the outer scope.
Provides a value to the element and everything inside it. The expression is evaluated where the element sits (outside). It is computed when something first injects it, and it updates when the values it reads change. It is set up before h-scope on the same element, and it also works on elements without h-scope. h-provide:shop-name is injected as shopName.
Reads values provided from above by name. It is a list of names, not an expression, and it receives from the provider however many levels up. Use it on h-scope, h-state, plain elements, and component tags.
A received name is read-only. Assigning to the name logs a console error and the value stays as it was (you can change the inside of a received object). If the received value itself must be replaced, ask the providing side. The receiving side notifies with an event, and the providing side changes its own value.
Values handed over by the server. They are read as JSON only and never run as an expression. A scope only reads them through $props. The server is what changes them. When the server renders the fragment again and sends it, they change to the new values.
Binds an attribute to a value. Shorthand: :.
Listens for events. Shorthand: @.
Fills the element's text with a value; the value is written in the attribute. To write it inside the text with {{ }}, use h-text-inline right below.
Reads {{ }} in the text directly under this element. It does not carry into inner elements. Without it, {{ }} stays as plain text. This keeps {{ }} in user text rendered by the server from running.
To read the text of inner elements too, write a selector as the value. Separate several with commas. * means everything inside. A selector that starts with > counts steps from the element it sits on: >* is the children, >*>* the grandchildren, and >*, >*>* both. It does not cross an inner h-scope, component, or h-pre, and it also stops at an element that has h-text or h-html. When it sits on the same element as h-text or h-html, that attribute wins. User text rendered by the server is read too if it sits inside a matching element, so list only the elements you need.
Fills the element's inner HTML with a value. The inserted HTML is treated as text. An h-scope or a component tag inside it is not mounted (the same as h-pre). Filter user-written text on the server before you insert it.
Keeps an input and a value in sync. The value the server rendered becomes the initial value.
It writes to the value only when the screen has changed. Right after you change the value, the screen may still show the old one, but an input or change event that arrives then does not revert the value. To read and write the value when you only hold the element, use $model.
Shows or hides based on a value.
Adds to or removes from the DOM based on a value. Can be followed by h-else.
Repeats once per item in a list.
A computed value readable on the element and inside it. It is read-only. On an h-scope element, it is visible across the whole scope. h-computed:total-price is read as totalPrice. Without a name it logs a console error. To run work without producing a value, use h-effect.
Re-runs the expression whenever the values it reads change. It produces no value. If you need a value, use h-computed.
With a modifier it does not follow values; it runs once at that node's moment. h-effect.mounted runs after the node comes alive, h-effect.unmounted when the node leaves the document, and h-effect.sealed just before the enclosing scope is sealed by $host.seal(). Sealing does not run .unmounted; for work needed at both moments, write h-effect.sealed.unmounted. It runs for each element that h-if or h-for renders and removes.
Names an element so you can reach it through $refs.
Accepts HTML the server re-rendered, but carries over the values being typed.
Hides the element until it is mounted. The attribute is removed once mounted. On a template, the content is inserted after the scope is ready.
Shows based on the state of an async task. The value is a name:state token, not an expression. Without a state it means pending. Without a value, it shows before the scope is ready.
Leaves everything inside untouched. It reads neither attributes nor {{ }} and leaves them as written.