There is a component <Bar> that inherits from a component <Foo>.
The <Foo> component defines a slot named content with a fallback content. The <Bar> component also defines a slot named content with a different fallback content.
<!-- Foo.svelte -->
<slot name="content">
foo fallback
</slot>
<!-- Bar.svelte -->
<script>import Foo from './Foo.svelte'</script>
<Foo>
<span slot="content">
bar fallback
</span>
</Foo>
The <Bar> component displays the fallback when called with <Foo/> but it does not display the custom content when called with <Bar><span slot="content">bar custom</span></Bar>.
Can you tell me what I am doing wrong?
<Foo/>
<!-- prints 'foo fallback': OK -->
<Foo>
<span slot="content">foo custom</span>
</Foo>
<!-- prints 'foo custom': OK -->
<Bar/>
<!-- prints 'bar fallback': OK -->
<Bar>
<span slot="content">bar custom</span>
</Bar>
<!-- prints 'bar fallback': KO - I would have expected 'bar custom' -->
The fiddle: https://svelte.dev/repl/5c525651eb8b4f60a6a696c1bd19f723