From 1459cc35c625cc97fe7c7c169bd1cf52bf63a25a Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 12 Sep 2023 17:31:24 -0700
Subject: [PATCH 1/4] feat(RecycleScroller): Set custom element tags

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 .../src/components/RecycleScroller.vue        | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/vue-virtual-scroller/src/components/RecycleScroller.vue b/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
index 54070fc1..a8ac32b3 100644
--- a/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
+++ b/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',

From 723f017222ce473b6cff17dfacd59b2c945bb395 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 12 Sep 2023 17:31:24 -0700
Subject: [PATCH 2/4] docs: Document new tag props

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 packages/vue-virtual-scroller/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/vue-virtual-scroller/README.md b/packages/vue-virtual-scroller/README.md
index fcc67520..22e9e78a 100644
--- a/packages/vue-virtual-scroller/README.md
+++ b/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).
 

From 554799a3a3c70eb014c0802befe04a6a7b5d0945 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 12 Sep 2023 17:31:24 -0700
Subject: [PATCH 3/4] feat(DynamicScroller): Set custom element tags

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 .../src/components/DynamicScroller.vue            |  3 +++
 .../vue-virtual-scroller/src/components/common.js | 15 +++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/vue-virtual-scroller/src/components/DynamicScroller.vue b/packages/vue-virtual-scroller/src/components/DynamicScroller.vue
index f5ab34ce..06fc2411 100644
--- a/packages/vue-virtual-scroller/src/components/DynamicScroller.vue
+++ b/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"
diff --git a/packages/vue-virtual-scroller/src/components/common.js b/packages/vue-virtual-scroller/src/components/common.js
index 45aa4004..c0718641 100644
--- a/packages/vue-virtual-scroller/src/components/common.js
+++ b/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',

From 76805bc0455ab0510973c87660e3622e3ac82afe Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 12 Sep 2023 17:31:24 -0700
Subject: [PATCH 4/4] fix: Preserve scrollability with display block - Override
 implicit display on elements like table

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 packages/vue-virtual-scroller/src/components/RecycleScroller.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue-virtual-scroller/src/components/RecycleScroller.vue b/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
index a8ac32b3..60205b41 100644
--- a/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
+++ b/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
@@ -747,6 +747,7 @@ export default {
 <style>
 .vue-recycle-scroller {
   position: relative;
+  display: block;
 }
 
 .vue-recycle-scroller.direction-vertical:not(.page-mode) {