What is a Svelte component?

A Svelte component is a .svelte file containing three optional sections: <script>: JavaScript logic, imports, props, state, and reactive declarations. Template (HTML): the markup that defines the component's DOM structure, using Svelte's template syntax for conditional rendering, loops, and event binding. <style>: CSS that is scoped by default — styles only apply to elements within this component. Example: <script> let count = 0; </script> <button on:click={() => count++}>{count}</button> <style> button { color: blue; } </style>. Each component is a self-contained unit. Svelte compiles this single file into an optimized JavaScript module. Parent components pass data to children via props; children communicate up via dispatched events or bound variables.