Bindings & Directives Interview Questions

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.

style: directive sets inline styles conditionally. Example: <div style:color={textColor}>. Can use shorthand when variable name matches style property.

Select elements bind using value or selectedIndex. Example: <select bind:value={selected}>. Supports multiple selection with array binding.

this binding references DOM element or component instance. Example: <div bind:this={element}>. Useful for direct DOM manipulation or component method access.

bind:group groups radio/checkbox inputs. Binds multiple inputs to single value/array. Example: <input type='radio' bind:group={selected} value='option'>.

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}.

Binding validation ensures valid values. Handle input constraints. Support custom validation. Implement error handling. Manage validation state.

Binding middleware processes binding operations. Handle value transformation. Support validation chain. Implement middleware pattern.

Binding dependencies manage related bindings. Handle dependency updates. Support dependency tracking. Implement dependency resolution.

Binding optimization improves update efficiency. Handle update batching. Support selective updates. Implement performance monitoring.

Custom directives extend element functionality. Handle directive lifecycle. Support directive parameters. Implement cleanup methods.

Binding error handling manages invalid states. Handle error recovery. Support error notifications. Implement error boundaries.

Binding composition combines multiple bindings. Handle binding interaction. Support binding inheritance. Implement composition patterns.

Binding cleanup manages resource disposal. Handle cleanup order. Support cleanup hooks. Implement cleanup strategies.

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.

Binding monitoring tracks binding usage. Handle performance tracking. Support debugging tools. Implement monitoring strategies.

Binding documentation describes binding usage. Generate documentation automatically. Support example usage. Manage documentation updates.

Binding security prevents unauthorized access. Handle input sanitization. Support security policies. Implement security measures.

Binding debuggers track binding issues. Handle debugging tools. Support state inspection. Implement debug logging.

Type safety ensures correct binding usage. Handle TypeScript integration. Support type checking. Implement type definitions.

Optimization strategies improve binding performance. Handle update batching. Support selective updates. Implement performance metrics.

State management handles binding state. Handle state updates. Support state sharing. Implement state patterns.

Binding accessibility ensures accessible usage. Handle ARIA attributes. Support screen readers. Implement a11y patterns.