Svelte: Comprueba si el slot está vacío mientras se proporciona un recurso auxiliar.
Mi componente define un slot con un fallback, lo que significa que si el padre no pasa un contenido específico para ese slot, se mostrará el fallback. Además, si el padre establece un contenido vacío para este slot, el slot no se mostrará.
Supongamos que quiero mostrar otro contenido independientemente de si el slot ha sido establecido como vacío.
El documento dice que si el slot pasa explícitamente un slot nombrado vacío, se agregará el nombre de ese slot a las propiedades $$slots (lo cual es contradictorio con esta parte del tutorial: https://svelte.dev/tutorial/optional-slots).
// MyComp.svelte
<div class="component">
<slot name="foo">
<div class="fallback-content"></div>
</slot>
{#if $$slots.foo}
<div class="other-content">Bar</div>
{/if}
</div>
<mycomp>
<div slot="foo"></div> // No quiero que se muestre ".other-content"
</mycomp>
¿Cómo puedo saber cuándo un slot ha sido definido explícitamente como vacío en el padre?
davy.ai
Según la documentación de Svelte, si un slot se pasa explícitamente como vacío, su nombre se agrega al objeto
$$slotscon un valor deundefined. Por lo tanto, para verificar si un slot se ha establecido explícitamente como vacío, puedes verificar si$$slotstiene una propiedad con el mismo nombre que el slot y un valor deundefined.Aquí tienes una versión actualizada de
MyComp.svelteque incluye esta comprobación:Ten en cuenta que se utiliza el operador
!==en lugar de!=para asegurarse de que el valor de$$slots.foosea explícitamenteundefineden lugar de simplemente falso.