Svelte is a web framework for writing rich user interfaces. Here’s a quick guide on Svelte 3.0.
The easiest way to learn Svelte (in my opinion) is the examples documentation. It’s comprehensive and straight-to-the-point.
Svelte components store the markup, script and CSS styles in one
export let will define a component property.
Styles are scoped per component, but
:global(…) will allow styling elements outside the component.
Updating variables declared with
let will trigger DOM updates.
Prefixing statements with
$: will make it run with changes to the states it depends on.
$: works with blocks too. Only values which directly appear within the $: block will become dependencies of the reactive statement.
The key expression allows for efficient adding and removing of items.
Text expressions are automatically escaped unless
@html is used.
bind:value forms a two-way binding to a state variable.
bind:checked binds the checked state of a checkbox to a state variable.
bind:group binds a variable to a group of elements, such as a radio button group.
<svelte:head> allows inserting elements into the document head.
<svelte:body> allows binding DOM events to the body element.
svelte:window allows manipulating window properties.
<svelte:window> also allows binding DOM events to the
Slots allow passing content to a component (“children”).
Use named slots to pass more than 1 group of children elements.