Bindings create two-way data flow between DOM elements and variables using bind: directive. Example: <input bind:value={text}>. Updates flow both ways, DOM to variable and variable to DOM.
Basic form bindings include value for text inputs, checked for checkboxes, group for radio/checkbox groups. Example: <input bind:value>, <input type='checkbox' bind:checked>.
use: directive attaches actions (reusable DOM node functionality) to elements. Example: <div use:action>. Actions can have parameters. Support cleanup through returned function.
class: directive conditionally applies CSS classes. Example: <div class:active={isActive}>. Shorthand available when variable name matches class name.
Custom component binding uses bind: on exported props. Component must export the variable. Example: <CustomInput bind:value>. Supports two-way binding.
Binding dependencies manage related bindings. Handle dependency updates. Support dependency tracking. Implement dependency resolution.
Advanced patterns include computed bindings, conditional bindings. Handle complex scenarios. Support pattern composition.
Binding testing verifies binding behavior. Handle test isolation. Support integration testing. Implement test utilities.
Select elements bind using value or selectedIndex. Example: <select bind:value={selected}>. Supports multiple selection with array binding.
bind:group groups radio/checkbox inputs. Binds multiple inputs to single value/array. Example: <input type='radio' bind:group={selected} value='option'>.
Binding validation ensures valid values. Handle input constraints. Support custom validation. Implement error handling. Manage validation state.
style: directive sets inline styles conditionally. Example: <div style:color={textColor}>. Can use shorthand when variable name matches style property.
this binding references DOM element or component instance. Example: <div bind:this={element}>. Useful for direct DOM manipulation or component method access.
Contenteditable elements bind using textContent or innerHTML. Example: <div contenteditable bind:textContent={text}>. Supports rich text editing.
Custom actions are functions returning optional destroy method. Handle DOM node manipulation. Support parameters. Example: use:customAction={params}.
Custom directives extend element functionality. Handle directive lifecycle. Support directive parameters. Implement cleanup methods.
