设置 customElement: true 时，Svelte 绑定不起作用

我想使用 Svelte 构建自定义元素。

Thus in rollup.config.js I set customElement: true，然后我必须使用 来引用我的子组件。

但我发现，通过这种方式，bind不管用。这是代码示例

HelloWorld.svelte（子级）

<script>
    import Hello from './components/Hello'
    import World from './components/World'
    export let value;
</script>

<svelte:options tag={'x-app-helloworld'}/>
<input type="text" bind:value={value} >

<input>
<x-app-hello />
<x-app-world />

App.svslte(parent) 的一部分。

<x-app-helloworld bind:value={value}/>

然后父级会显示错误：'value' is not a valid binding on <x-app-helloworld> elements.

我该如何解决这个问题bind问题？

绑定适用于常规元素，因为 Svelte 知道哪个事件对应于每个绑定 — 例如，它知道value of an <input>当元素触发时发生变化change or input event.

对于自定义元素，无法知道父级应该监听什么事件（如果有）。并且没有现在一种从元素内部调度事件的巧妙方法。因此，最好的选择是将回调传递给自定义元素，并在值发生变化时调用它：

<x-app-helloworld onValueChange="{(x) => value = x}"/>

<script>
  export let onValueChange;
  export let value;

  $: onValueChange(value);
</script>