Hay un componente <Bar> que hereda de un componente <Foo> .
El componente <Foo> define una ranura denominada content con un contenido alternativo. El componente <Bar> también define una ranura denominada content con un contenido alternativo diferente.
<!-- 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> El componente <Bar> muestra el respaldo cuando se llama con <Foo/> pero no muestra el contenido personalizado cuando se llama con <Bar><span slot="content">bar custom</span></Bar> .
¿Puedes decirme qué estoy haciendo mal?
<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' -->Tenga en cuenta que este código está demasiado simplificado, y mi caso de uso del mundo real es un poco más complejo que esto, y necesito usar ranuras allí.
El violín: https://svelte.dev/repl/5c525651eb8b4f60a6a696c1bd19f723
Parece que desea representar el contenido del espacio pasado a Bar en el espacio definido por Foo , pero actualmente no ha definido un espacio en Bar , por lo que no hay ningún lugar para usar el contenido pasado, por lo tanto, el valor de reserva siempre se pasa a Foo
Una solución podría parecerse a la siguiente, definiendo un espacio de content en Bar dentro del intervalo pasado al espacio de contenido de Foo .
// App.svelte <script> import Foo from './Foo.svelte' import Bar from './Bar.svelte' </script> Expected: <em>bar custom</em><br> <Bar> <span slot="content">bar custom</span> </Bar> // ./Bar.svelte <script> import Foo from './Foo.svelte'; </script> <Foo> <span slot="content"> <slot name="content">bar fallback</slot> </span> </Foo> // ./Foo.svelte <slot name="content"> foo fallback </slot>Creo que la mayoría de las respuestas estaban bastante cerca. Creo que puede solucionarlo creando un espacio en el que tanto el contenido como el nombre tengan el mismo valor. Partiendo de su ejemplo ( Repl con herencia completa de tercer nivel ),
<!-- Foo.svelte --> <slot name="content"> foo fallback </slot> <!-- Bar.svelte --> <script>import Foo from './Foo.svelte'</script> <Foo> <slot name="content" slot="content"> bar fallback </slot> </Foo>Al hacerlo de esta manera, estamos pasando la ranura e incluyendo nuestro nuevo respaldo.
Si estaba buscando asegurarse de que el tramo esté allí, puede hacerlo colocándolo dentro o fuera de la slot según su caso de uso.
<!-- Bar.svelte --> <script>import Foo from './Foo.svelte'</script> <!-- option 1--> <Foo> <span> <slot name="content" slot="content"> bar fallback </slot> </span> </Foo> <!-- option 2--> <Foo> <slot name="content" slot="content"> <span> bar fallback </span> </slot> </Foo>