Weird element appearance after page reload

[Limit-sest]

Hello, I'm trying to use sveltekit with mdui. I've never used before any of these, so there is quite high chance that I did something wrong but I would be glad for any help. The preview server is started using vite dev.

22-08-2024.14-11.mp4

<script>
    import 'mdui/components/segmented-button-group.js';
    import 'mdui/components/segmented-button.js';
    import 'mdui/components/text-field.js';
    import 'mdui/components/button.js';
	// import FormUrl from './FormURL.svelte';
</script>

<style>
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-column: 1 / span 4;
        grid-row: 1;
        justify-content: start;
        gap: 32px;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: start;
        gap: 16px;
    } 

    .submit_btn {
        align-self: flex-end;
    }
</style>

<div class="wrapper">
    <mdui-segmented-button-group full-width selects="single" value="url">
        <mdui-segmented-button value="url">URL</mdui-segmented-button>
        <mdui-segmented-button value="text">Text</mdui-segmented-button>
        <mdui-segmented-button value="wifi">WiFi</mdui-segmented-button>
    </mdui-segmented-button-group>

    <form action="" id="qr_content">
        <!-- <FormUrl></FormUrl> -->
        <mdui-text-field form="qr_content" type="url" label="Website adress" placeholder="https://example.com"></mdui-text-field>
        <mdui-button class="submit_btn" end-icon="qr_code--rounded" type="submit" form="qr_content">Create QR code</mdui-button>
    </form>

</div>

[zdhxiong]

When the mdui component is initialized, some default attributes are added. For example, <mdui-text-field label="Text Field"></mdui-text-field> changes to <mdui-text-field label="Text Field" variant="filled" type="text"></mdui-text-field> after initialization. However, these default attributes are removed in SvelteKit. I'm not familiar with SvelteKit and I'm unclear about what it's doing.

I also tested other web component libraries (like Shoelace) in SvelteKit, and I encountered the same issue, so this might be a problem with SvelteKit. I recommend providing feedback to the SvelteKit community.