Svelte: Custom elements - attributes are observed only when used in tags in templates

[ospatil]

I'm trying to achieve the following behaviour using custom elements -
https://svelte.technology/repl?version=1.39.1&gist=2f62b5905d486426b9f5075c256a71a5

I'm passing in msg attribute to the component to be used later to display when user clicks on the button.

It works with normal components but doesn't with custom elements. It works for custom elements only when I use the msg attribute as a tag in the template {{msg}}.

The source for custom elements implementation is available here - https://github.com/ospatil/svelte-custom-elem-bug.git.

[Rich-Harris]

You can manually specify the props that are exposed:

<script>
  export default {
    tag: 'my-thing',
    props: ['msg']
  };
</script>

(All this will be documented eventually! 😬 )

[ospatil]

Great, thank you 😃! I'll try that.

I am quite new to Svelte but I can certainly help in the documentation effort. Just point me in the right direction and I'll be delighted to contribute.

[ospatil]

and it works!

Note to self - Check on gitter first before opening issues willy-nilly 😃!

[Rich-Harris]

All the docs live here — PRs always welcome 😀