diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
index 8f74707be1..b74c6c5d96 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
-  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
-  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
-  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
-</script>
-
 <template>
+  <MainScroll class="CUSTOM-CLASS" data-custom="CUSTOM-DATA-ATTR">
+    <ul class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
   <MainScroll>
     <ul class="list" data-test="scroll">
       <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
@@ -14,6 +15,27 @@
   </MainScroll>
 </template>
 
+<script setup lang="ts">
+  import { useXBus } from '../../../../x-components/src/composables/use-x-bus';
+  import { XEvent } from '../../../../x-components/src/wiring/events.types';
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+
+  const xBus = useXBus();
+
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+  const events: XEvent[] = [
+    'UserScrolledToElement',
+    'ScrollRestoreSucceeded',
+    'ScrollRestoreFailed'
+  ];
+
+  events.forEach(event => {
+    // eslint-disable-next-line no-console
+    xBus.on(event, true).subscribe(args => console.log(`${event} event ->`, args));
+  });
+</script>
+
 <style scoped lang="scss">
   .list {
     overflow: auto;
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
index 8ecf56eab0..e4a03d984e 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
@@ -4,7 +4,7 @@ import { ScrollXModule } from '../../../../x-components/src/x-modules/scroll/x-m
 export const scrollXModule: PrivateXModuleOptions<ScrollXModule> = {
   storeModule: {
     state: {
-      pendingScrollTo: 'item-10'
+      pendingScrollTo: 'item-15'
     }
   }
 };
diff --git a/packages/x-components/src/components/no-element.ts b/packages/x-components/src/components/no-element.ts
index ea90699032..daaf905801 100644
--- a/packages/x-components/src/components/no-element.ts
+++ b/packages/x-components/src/components/no-element.ts
@@ -8,7 +8,8 @@ import { useNoElementRender } from '../composables/use-no-element-render';
  * @internal
  */
 export const NoElement = defineComponent({
-  setup(props, { slots }) {
+  name: 'NoElement',
+  setup(_, { slots }) {
     return () => useNoElementRender(slots);
   }
 });
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index cfdf65655e..358086ac59 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -33,67 +33,35 @@
     name: 'MainScrollItem',
     xModule: scrollXModule.name,
     props: {
-      /**
-       * The item data. Used to set the scroll identifier.
-       *
-       * @public
-       */
+      /** The item data. Used to set the scroll identifier. */
       item: {
         type: Object as PropType<Identifiable>,
         required: true
       },
-      /**
-       * The tag to render.
-       *
-       * @public
-       */
+      /** The tag to render. */
       tag: {
         type: [String, Object] as PropType<string | typeof Vue>,
         default: 'div'
       }
     },
     setup(props) {
-      type ElementRef = {
-        $el: HTMLElement;
-      };
-
       const xBus = useXBus();
 
-      /**
-       * Rendered HTML node.
-       *
-       * @public
-       */
-      const rootRef = ref<ElementRef | HTMLElement | null>(null);
+      /** Rendered HTML node. */
+      const rootRef = ref<HTMLElement>();
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
        * `id` property, this component should be scrolled into view.
-       *
-       * @internal
        */
       const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
 
-      /**
-       * Observer to detect the first visible element.
-       *
-       * @internal
-       */
+      /** Observer to detect the first visible element. */
       const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(
         ScrollObserverKey as string,
         null
       );
-      /**
-       * Checks if a given value is an `ElementRef` object.
-       *
-       * @param value - The value to check.
-       * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
-       *
-       * @internal
-       */
-      const isElementRef = (value: any): value is ElementRef => {
-        return value && value.$el instanceof HTMLElement;
-      };
+
       /**
        * Initialises the element visibility observation, stopping the previous one if it has.
        *
@@ -105,14 +73,12 @@
         oldObserver: ScrollVisibilityObserver | null
       ): void => {
         {
-          if (rootRef.value !== null) {
-            const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
-
-            oldObserver?.unobserve(htmlElement);
-            newObserver?.observe(htmlElement);
+          if (rootRef.value) {
+            oldObserver?.unobserve(rootRef.value);
+            newObserver?.observe(rootRef.value);
             if (pendingScrollTo.value === props.item.id) {
               Vue.nextTick(() => {
-                htmlElement.scrollIntoView({
+                rootRef.value!.scrollIntoView({
                   block: 'center'
                 });
               });
@@ -122,15 +88,10 @@
         }
       };
 
-      /**
-       * Detaches the observer from the rendered element to prevent memory leaks.
-       *
-       * @internal
-       */
+      /** Detaches the observer from the rendered element to prevent memory leaks. */
       onBeforeUnmount(() => {
-        if (rootRef.value !== null) {
-          const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
-          firstVisibleItemObserver?.value.unobserve(htmlElement);
+        if (rootRef.value) {
+          firstVisibleItemObserver?.value.unobserve(rootRef.value);
         }
       });
 
@@ -139,8 +100,6 @@
        * - Observes the rendered element to detect if it is the first visible item.
        * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
        * element into the first position of the view.
-       *
-       * @internal
        */
       onMounted(() => {
         nextTick(() => {
@@ -151,7 +110,7 @@
         });
       });
 
-      return { rootRef, firstVisibleItemObserver, observeItem, isElementRef };
+      return { rootRef };
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 9c03c9f35c..07151b1935 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -1,16 +1,19 @@
-<template>
-  <NoElement ref="rootRef" :class="dynamicClasses">
-    <slot />
-  </NoElement>
-</template>
 <script lang="ts">
-  import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
-  import { VueCSSClasses } from '../../../utils/types';
+  import {
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    h,
+    onBeforeUnmount,
+    onMounted,
+    provide,
+    ref,
+    watch
+  } from 'vue';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
   import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
-  import { NoElement } from '../../../components/no-element';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
 
@@ -26,14 +29,11 @@
   export default defineComponent({
     name: 'MainScroll',
     xModule: scrollXModule.name,
-    components: { NoElement },
     props: {
       /**
        * If `true`, sets this scroll instance to the main of the application. Being the main
        * scroll implies that features like restoring the scroll when the query changes, or storing
        * the scroll position in the URL will be enabled for this container.
-       *
-       * @public
        */
       useWindow: {
         type: Boolean,
@@ -42,70 +42,40 @@
       /**
        * Timeout in milliseconds to abort trying to restore the scroll position to the target
        * element.
-       *
-       * @public
        */
       restoreScrollTimeoutMs: {
         type: Number,
         default: 5000
       },
-      /**
-       * Intersection percentage to consider an element visible.
-       *
-       * @public
-       */
+      /** Intersection percentage to consider an element visible. */
       threshold: {
         type: Number,
         default: 0.3
       },
-      /**
-       * Adjusts the size of the scroll container bounds.
-       *
-       * @public
-       */
+      /** Adjusts the size of the scroll container bounds. */
       margin: {
         type: String,
         default: '0px'
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const xBus = useXBus();
 
-      /**
-       * The elements that are currently considered visible.
-       *
-       * @internal
-       */
+      /** The reference to the root element of the component. */
+      const rootRef = ref<Element>();
+      /** The elements that are currently considered visible. */
       const intersectingElements = ref<HTMLElement[]>([]);
-      /**
-       * The reference to the root element of the component.
-       *
-       * @internal
-       */
-      const rootRef = ref<typeof NoElement | null>(null);
 
-      /**
-       * Intersection observer to determine visibility of the elements.
-       *
-       * @returns An intersection observer to detect elements visibility.
-       * @internal
-       */
+      /** Intersection observer to determine visibility of the elements. */
       let intersectionObserver = ref<IntersectionObserver | null>(null);
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
        * `id` property, this component should be scrolled into view.
-       *
-       * @internal
        */
       const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
 
-      /**
-       * Disables the animations.
-       *
-       * @returns A boolean to disable the animations.
-       * @internal
-       */
+      /** Disables the animations. */
       const disableAnimations = computed((): boolean => !!pendingScrollTo.value);
       provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations);
 
@@ -113,9 +83,8 @@
        * Removes an element from the {@link MainScroll.intersectingElements} list.
        *
        * @param element - The element to remove from the visible elements.
-       * @internal
        */
-      const removeVisibleElement = (element: HTMLElement): void => {
+      const removeVisibleElement = (element: HTMLElement) => {
         const index = intersectingElements.value.indexOf(element);
         if (index !== -1) {
           intersectingElements.value.splice(index, 1);
@@ -127,7 +96,6 @@
        * component should register themselves if they want to be observed.
        *
        * @returns The intersection observer.
-       * @public
        */
       const visibleElementsObserver = computed((): ScrollVisibilityObserver | null => {
         const observer = intersectionObserver.value;
@@ -147,9 +115,8 @@
        * Updates the visible elements given a list of intersection observer entries.
        *
        * @param entries - The entries from whom update the visibility.
-       * @internal
        */
-      const updateVisibleElements = (entries: IntersectionObserverEntry[]): void => {
+      const updateVisibleElements = (entries: IntersectionObserverEntry[]) => {
         entries.forEach(entry => {
           const target = entry.target as HTMLElement;
           if (entry.isIntersecting) {
@@ -160,55 +127,34 @@
         });
       };
 
-      /**
-       * Initialise the observer after mounting the component.
-       */
+      /** Stores the root element and initialise the observer after mounting the component. */
       onMounted(() => {
-        if (rootRef.value?.$el) {
+        rootRef.value = getCurrentInstance()?.proxy?.$el;
+        if (rootRef.value) {
           intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
-            root: props.useWindow ? document : rootRef.value.$el,
+            root: props.useWindow ? document : rootRef.value,
             threshold: props.threshold,
             rootMargin: props.margin
           });
         }
       });
 
-      /**
-       * Disconnects the intersection observer.
-       *
-       * @internal
-       */
+      /** Disconnects the intersection observer. */
       onBeforeUnmount(() => {
         intersectionObserver.value?.disconnect();
         xBus.emit('UserScrolledToElement', '');
       });
 
-      /**
-       * Disconnects the previous observer.
-       *
-       * @param _new - The new `IntersectionObserver`.
-       * @param old - The new `IntersectionObserver`.
-       * @internal
-       */
-      watch(
-        intersectionObserver,
-        (_new: IntersectionObserver | null, old: IntersectionObserver | null) => {
-          old?.disconnect();
-        }
-      );
+      /** Disconnects the previous observer. */
+      watch(intersectionObserver, (_new, old) => old?.disconnect());
 
-      /**
-       * Stores the identifier of the timeout that will consider the scroll failed to restore.
-       *
-       * @internal
-       */
+      /** Stores the identifier of the timeout that will consider the scroll failed to restore. */
       let restoreScrollFailTimeoutId: number;
 
       /**
        * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
        *
        * @param pendingScrollTo - The position the scroll should be restored to.
-       * @internal
        */
       watch(pendingScrollTo, () => {
         // TODO Move this logic to the wiring. A cancelable delay operator is needed
@@ -220,26 +166,12 @@
         }
       });
 
-      /**
-       * Adds the dynamic css classes to the component.
-       *
-       * @returns The class to be added to the component.
-       *
-       * @internal
-       */
-      const dynamicClasses = computed((): VueCSSClasses => {
-        return {
-          'x-main-scroll--no-transition': !!pendingScrollTo.value
-        };
-      });
-
       /**
        * The first visible element contained in this component.
        *
        * @returns The first visible element in this component.
-       * @internal
        */
-      const firstVisibleElement = computed((): string | '' => {
+      const firstVisibleElement = computed(() => {
         if (intersectingElements.value.length === 0) {
           return '';
         }
@@ -254,26 +186,24 @@
               : firstVisibleElement;
           }
         );
-        return firstVisibleElement ===
-          (rootRef.value?.$el as HTMLElement).querySelector('[data-scroll]')
+        return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')
           ? ''
           : firstVisibleElement.dataset.scroll!;
       });
+
       watch(
         firstVisibleElement,
-        () => {
-          xBus.emit('UserScrolledToElement', firstVisibleElement.value);
-        },
+        () => xBus.emit('UserScrolledToElement', firstVisibleElement.value),
         { immediate: true }
       );
 
-      return {
-        rootRef,
-        dynamicClasses,
-        firstVisibleElement,
-        visibleElementsObserver,
-        intersectingElements
-      };
+      /*
+       * Obtains the vNodes array of the default slot and renders only the first one.
+       * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2
+       * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to
+       * retrieve the HTML element in both versions.
+       */
+      return () => slots.default?.()[0] ?? h();
     }
   });
 </script>