[Feature Request] Styling Limitations Caused by Abstracted Wrappers | Styling

[MindfulLearner]

Problem to solve

As you can see in the playground , I’m using the ul tag with li elements separated like that. The problem is that I can’t use anything inside the v-slide-group-item.

v-slide-group__content can't be styled.

Proposed solution

I also want to point out that I can’t apply any classes to it because there are abstracted wrappers that prevent it.

I propose that v-slide-group should allow styles to reach the last abstracted wrapper.

This issue happens with various Vuetify components.

<template>
  <h1>Example 2</h1>
  <v-slide-group tag="ul">
    <v-slide-group-item v-for="(item, index) in items">
      <li>
        <v-btn> Foo </v-btn>
      </li>
    </v-slide-group-item>
  </v-slide-group>
</template>

by solving working tag we can prevent on using html

and also separation of ul and li, and most important we can now have Horizontal list that are not Navigation!

[b-maslennikov]

try to use scoped style with :deep()
https://vuejs.org/api/sfc-css-features

like this

<style scoped>
.v-slide-group :deep(.v-slide-group__content) {
    color: red;
}
</style>

[MindfulLearner]

super nice! @b-maslennikov

try to use scoped style with :deep() https://vuejs.org/api/sfc-css-features

like this

<style scoped>
.v-slide-group :deep(.v-slide-group__content) {
    color: red;
}
</style>

but for tags?