Svelte does not support two-way-data-binding with custom elements when the property name is value

[knuspertante]

Hey,

I just read this blog post and saw this repository linked there. Nice to see this movement and progress for ui5 webcomponents.

Good job guys!

I tried to use ui5 webcomponents with svelte two years ago and stumpled on some points.

But all in all it works really nice!

I think probably you should mention some points in README, which are currently not supported.

Such as two way data binding on input-element is not working as expected. See: https://github.com/sveltejs/svelte/issues/4838

<script>
    import "@ui5/webcomponents/dist/Button";
    import "@ui5/webcomponents/dist/Input";
    export let name = world;
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
<h1>Hello {name}!</h1>
<ui5-button>Hello {name}</ui5-button>
<!-- databind implement by myself -->
<ui5-input value={name} on:input={(e) => name = e.target.value}></ui5-input>

<!-- svelte "native" two-way-databinding -->
<!-- comment this out to see the problem-->
<!--<ui5-input bind:value={name}></ui5-input>-->
</main>

[Tommertom]

A way to solve this is to wrap the element in a svelte component and put the dispatcher in there

As per example code in this repo

So all ui5 elements get a svelte equivalent as a library

I am working on the same for Ionic and bumped into this repo trying to find a solution for named slots in Svelte

So you know what's coming when going down this route 😀