Description
Currently Svelte doesn't support passing an object into a Web Component property via an attribute. This works if you are using a regular Svelte Component, just not when the compiler is configured to output Web Components (customElement = true).
Worse, the compiler doesn't even warn you about this. So if you take a perfectly functioning Svelte app and flip the switch to output Web Components then it might just break with runtime errors about properties being undefined.
It seems like the compiler could replace attribute assignments to objects with JSON.parse calls, or alternatively replace with bind:this="{component}" and onMount { component.prop = obj; }. Then Svelte code would just work, regardless of if outputting Svelte component vs Web Component. If I'm missing something and this isn't possible, then at least have the compiler warn about this situation.
Here is an Example:
<!-- Label.svelte -->
<script>
export let config = {};
</script>
<div>{config.text}</div>
<svelte:options tag="test-label"/>
<!-- App.svelte -->
<script>
import { onMount } from 'svelte';
import Label from './Label.svelte';
let config = {text: 'hi'};
let myLabel;
onMount(() => {
myLabel.config = config;
});
</script>
<Label bind:this="{myLabel}"/>
<svelte:options tag="test-app"/>
In this example, if I instead try to set the property via an attribute it will fail at runtime with undefined property. So for example, this won't work with Web Components:
<Label {config}/>