Props are default to DOM object properties, setting attributes should add the attr: prefix.
Props containing - are considered as attributes as well. You can override the behavior by adding prop: prefix to them.
Boolean values are rendered as toggling the prop on and off.
Usage: attr:attribute-to-be-set="value"
Example:
<>
<input type="checkbox" attr:checked="true"/>
<div data-tooltip="Hello"/>
<div prop:my-weird-prop={variable}/>
</>Usage: on[-option-moreOptions]:eventName={handler}
Examples:
- Simple click
<button on:click={() => alert('Clicked!')}>Click me!</button>- Click once
<button on-once:click={() => alert('Clicked!')}>Click me!</button>- Passive
<div on-passive:scroll={() => {/* do some time consuming operations */}}>{loooooongContent}</div>- Multiple options
<div on-capture-passive:click={() => alert('Clicked!')}><button>Click me!</button></div>- Get event object
<input on:input={(event) => console.log(event.target.value)}/>We provide presets for conveinence.
- Check here