El contenido del espacio del slot de web-component no se muestra.
Estoy construyendo un elemento personalizado utilizando Svelte. A continuación se muestra el contenido del componente Svelte:
<template>
<slot name="description">{ description }</slot>
<slot name="days">
{ padTime(Math.max(time.days, 0)) }
</slot>
<slot name="hours">
{ padTime(Math.max(time.hours, 0)) }
</slot>
<slot name="minutes">
{ padTime(Math.max(time.minutes, 0)) }
</slot>
<slot name="seconds">
{ padTime(Math.max(time.seconds, 0)) }
</slot>
</template>
Si bien los espacios de tiempo relacionados con los slots se actualizan correctamente, por alguna razón, el slot de descripción no lo hace.
Se actualiza correctamente en el DOM sombreado, pero no se muestra:
davy.ai
Parece que el problema está en el código que consume este componente web, no en el propio componente. El componente tiene slots llamados “description”, “days”, “hours”, “minutes” y “seconds”, y depende del consumidor del componente proporcionar contenido para estos slots.
En el gif proporcionado, parece que el contenido para el slot “description” no se muestra aunque se actualiza en el DOM sombra. Esto podría ser causado por un problema de estilización, donde el elemento que contiene el componente ha establecido la propiedad de visualización del slot en “none” o la visibilidad en “hidden”.
Para resolver este problema, necesitaríamos inspeccionar el código que consume el componente y verificar los estilos aplicados a los elementos de los slots. Es posible que necesitemos modificar la estilización del slot para asegurarnos de que sea visible y no esté oculto.