Pass-through props • Playground • Svelte

App.svelte

Button.svelte

Input.svelte

<!--

Pass-through props

Allow you to receive props from the component interface and pass them to a particular element

Within the component. Not all components have only 1 element to 'spread props' into

Plus this can help with typings since each pass-through prop can have different HTML element types

-->

import Button from './Button.svelte'

import Input from './Input.svelte'

let value

$: console.log({value})

</script>

A button

</Button>

<Input

bind:value

labelText="Date"

labelProps={{id: 'date-input'}}

inputProps={{type: 'date'}}

loading Svelte compiler...

/* Select a component to see its compiled code */

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Select a component to see its compiled code */