I was lazy loading some components on my svelte applications (followed this guide - https://www.youtube.com/watch?v=eXM0i6qgJyY) but data- attributes don't work on lazy-loaded components.

In my case, I am using Flowbite for popovers but the popovers don't work and upon inspecting the page, I found out that the data- attribute wasn't present in the HTML.

Lazy loading is handled by the following reusable component -

<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}

For components being lazy loaded, this is how I have coded it -

<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>

The source code for the website - https://github.com/AnishDe12020/portfolio

Would be helpful if someone could let me know if I am going wrong anywhere (maybe there is a better way to lazy load that preserves the data- attributes?)