javascript / intermediate
Snippet
Dynamic Attributes with Rest Props
The $$restProps object contains all properties passed to a component that aren't declared with 'export let'. This allows components to accept and spread standard HTML attributes dynamically onto internal elements.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<!-- CustomButton.svelte --><button class="btn" {...$$restProps}><slot /></button><!-- App.svelte --><CustomButton type="submit" aria-label="Submit Form">Send</CustomButton>
svelte
Breakdown
1
{...$$restProps}
Spreads all extra attributes (like 'type' or 'aria-label') onto the button element.
2
<slot />
Placeholder for the content passed between the component tags.