Open
Description
Describe the bug
The list-class prop is not being applied correctly when used with scoped styles.
Reproduction
<template>
<RecycleScroller
class="scroller"
list-class="scroller-wrapper"
:items="list"
:item-size="32"
key-field="id"
v-slot="{ item }"
>
<div class="user">
{{ item.name }}
</div>
</RecycleScroller>
</template>
<script>
export default {
props: {
list: Array,
},
}
</script>
<style scoped>
.scroller {
height: 100%;
}
.scroller-wrapper {
background-color: red;
}
.user {
height: 32%;
padding: 0 12px;
display: flex;
align-items: center;
}
</style>
System Info
System:
OS: Windows 10 10.0.18363
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 3.85 GB / 11.90 GB
Binaries:
Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.17.3 - D:\yarn-1.17.3\bin\yarn.CMD
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.14.0 - C:\Program Files\nodejs\node_global\pnpm.CMD
Browsers:
Chrome: 131.0.6778.86
Edge: Spartan (44.18362.1533.0)
Internet Explorer: 11.0.18362.1
npmPackages:
vite: ^4.5.3 => 4.5.3
vue: 2.6.14 => 2.6.14
vue-virtual-scroller: ^1.1.2 => 1.1.2
Used Package Manager
npm
Validations
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.