Search code examples
bindingsveltesvelte-3svelte-component

How to bind prop in Client-side component API in svelte?


In the svelte docs: Client-side component API, there is no way described to bind a prop to a component mounted through client-side component API.

Consider the Usecase:

import comp from './comp.svelte'

let value = 33

new comp({ 
    target: document.getElementById('#iframe').contentDocument
                .getElementById('#container')
    props: {
        bindme: value // how to actually bind?
    }
})

Solution

  • You just can't. The client-side API has many limitations around reactivity and slots.

    Try to limit the use of the client-side API to top level components. You can also use events and $on or work with stores if you really need to use the client-side API.