Skip to content

The list-class prop is not being applied correctly when used with scoped styles. #880

Open
@AIDeepx

Description

@AIDeepx

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions