resize-observer div doesn't have the data attribute

[badalsaibo]

<template>
  <Dropdown v-bind="$attrs">
    <slot></slot>
    <template #popper="slotProps">
      <slot name="content" v-bind="slotProps"></slot>
    </template>
  </Dropdown>
</template>

<script lang="ts" setup>
import { Dropdown } from 'floating-vue';
import 'floating-vue/dist/style.css';
</script>

For this component using in two different pages. For first page, the resize-observer class has the id generated on it.

But on a second page i.e a new route. The id isn't attached on the resize-observer

Why is the id important?

Because the base styles import 'floating-vue/dist/style.css' apply some styles to the resize-observor based on the data attribute, which is crucial for positioning of the dropdown.

.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}

https://unpkg.com/[email protected]/dist/style.css