Nested vue-virtual-scroller components CSS conflict

[davidpelayo]

Thanks for this awesome component, first of all.

I'm integrating it currently in my project, where I do have the need to leverage it nested in with two different configurations:

• First instance running a horizontal instance.
• Per each element of the horizontal list, I'm also needing a vertical instance.

As you could imagine, that's due the fact I need to render a massive amount of nodes, in a structure like follows:

const data = [{
  title: 'Example',
  flags: [true, false, true, false],
  data: [{
    title: 'Sub example',
    flags: [true, false, true, false]
  }]
}];

The first level could be thousands of elements, and per each individual, thousands of them.

The issue I'm facing, though, is the following:

The library styles is applying styles with nested selectors, therefore the vertical list (level 1 data) is getting the styles from the level 0 list (regardless it's set in vertical mode, and the styles from the parent is horizontal).

Any hints on ☝️?

Thanks in advance.

[davidpelayo]

At the time of this writing, I'm manually fixing it by reseting the styles with the proper selectors.

However, it would be nice to have this considered within the library styles, don't you think?

[patchthecode]

how are you resetting the styles? I also have issue.

my root is vertical, and child is horiontal