feat: Set custom element tags

packages/vue-virtual-scroller/README.md

@@ -198,6 +198,9 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `emitUpdate` (default: `false`): emit a `'update'` event each time the virtual scroller content is updated (can impact performance).
 - `listClass` (default: `''`): custom classes added to the item list wrapper.
 - `itemClass` (default: `''`): custom classes added to each item.
+- `rootTag` (default: `'div'`): the element to render as the root container.
+- `beforeTag` (default: `'div'`): the element to render as the before slot wrapper.
+- `afterTag` (default: `'div'`): the element to render as the after slot wrapper.
 - `listTag` (default: `'div'`): the element to render as the list's wrapper.
 - `itemTag` (default: `'div'`): the element to render as the list item (the direct parent of the default slot content).
 

packages/vue-virtual-scroller/src/components/DynamicScroller.vue

@@ -5,6 +5,9 @@
     :min-item-size="minItemSize"
     :direction="direction"
     key-field="id"
+    :root-tag="rootTag"
+    :before-tag="beforeTag"
+    :after-tag="afterTag"
     :list-tag="listTag"
     :item-tag="itemTag"
     v-bind="$attrs"

packages/vue-virtual-scroller/src/components/RecycleScroller.vue

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <component
+    :is="rootTag"
     v-observe-visibility="handleVisibilityChange"
     class="vue-recycle-scroller"
     :class="{
@@ -9,15 +10,16 @@
     }"
     @scroll.passive="handleScroll"
   >
-    <div
+    <component
       v-if="$slots.before"
+      :is="beforeTag"
       ref="before"
       class="vue-recycle-scroller__slot"
     >
       <slot
         name="before"
       />
-    </div>
+    </component>
 
     <component
       :is="listTag"
@@ -59,18 +61,19 @@
       />
     </component>
 
-    <div
+    <component
       v-if="$slots.after"
+      :is="afterTag"
       ref="after"
       class="vue-recycle-scroller__slot"
     >
       <slot
         name="after"
       />
-    </div>
+    </component>
 
     <ResizeObserver @notify="handleResize" />
-  </div>
+  </component>
 </template>
 
 <script>
@@ -152,6 +155,21 @@ export default {
       default: false,
     },
 
+    rootTag: {
+      type: String,
+      default: 'div',
+    },
+
+    beforeTag: {
+      type: String,
+      default: 'div',
+    },
+
+    afterTag: {
+      type: String,
+      default: 'div',
+    },
+
     listTag: {
       type: String,
       default: 'div',
@@ -729,6 +747,7 @@ export default {
 <style>
 .vue-recycle-scroller {
   position: relative;
+  display: block;
 }
 
 .vue-recycle-scroller.direction-vertical:not(.page-mode) {

packages/vue-virtual-scroller/src/components/common.js

@@ -15,6 +15,21 @@ export const props = {
     validator: (value) => ['vertical', 'horizontal'].includes(value),
   },
 
+  rootTag: {
+    type: String,
+    default: 'div',
+  },
+
+  beforeTag: {
+    type: String,
+    default: 'div',
+  },
+
+  afterTag: {
+    type: String,
+    default: 'div',
+  },
+
   listTag: {
     type: String,
     default: 'div',