Me dio pereza cargar algunos componentes en mis aplicaciones esbeltas (seguí esta guía: https://www.youtube.com/watch?v=eXM0i6qgJyY ), pero los atributos de data- no funcionan en componentes con carga diferida.

En mi caso, estoy usando Flowbite para ventanas emergentes, pero las ventanas emergentes no funcionan y, al inspeccionar la página, descubrí que el atributo de data- no estaba presente en el HTML.

La carga diferida es manejada por el siguiente componente reutilizable:

 <script> let loadComponent; export { loadComponent as this }; const componentPromise = loadComponent(); </script> {#await componentPromise} <slot name="loading">Loading...</slot> {:then { default: Component }} <slot name="component" {Component} /> {/await}

Para los componentes que se cargan de forma diferida, así es como lo he codificado:

 <Lazy this={() => import("../components/blog-posts.svelte")}> <div slot="loading">Loading</div> <svelte:fragment slot="component" let:Component> <Component blogPosts={blogData.posts} blogBaseUrl={data.blogBaseUrl} /> </svelte:fragment> </Lazy>

El código fuente del sitio web: https://github.com/AnishDe12020/portfolio

Sería útil si alguien pudiera informarme si me estoy equivocando en alguna parte (¿tal vez hay una mejor manera de carga diferida que conserva los atributos de data- ?)