[Feature Request] Scoped styles

[austingil]

[Feature Request] Scoped styles

[AustinGil]

Does it need to be scoped styles? I just added scoped classes to the nested dom nodes. Scoped styles wouldn't be too hard. However, why not just add modifier classes to the custom buttons? For example:

<VToggle /> and <VToggle class="custom" />

Then you could simply use the nested classes to style.

[AustinGil]

@jllagerberg Did you see my previous comment here?

[juliandreas]

@jllagerberg Did you see my previous comment here?

I had some use case for a scoped style, but I don't recall what it was. But your solution seems good enough.

[lbineau]

I faced the same issue and solved it this way:

<template>
  <VToggle open label="Click here to open the toggle">
    <div class="toggle-content">
      <p>Here is the content. Sweet!</p>
    </div>
  </VToggle>
</template>

<style lang="scss" scoped>
.vts-toggle {
  & /deep/ {
    .vts-toggle__label {
      background:red;
    }
  }
}
</style>

It then generates something like:

.vts-toggle[data-v-1a96869e] .vts-toggle__label {
    background: red;
}

.vts-toggle is scoped so imo it is ok enough as you can unscoped and use the CSS cascade to style this specific component.

[AustinGil]

@lbineau are you trying to add styles for just this specific instance of VToggle? Because my original thought was that folks would style every instance the same. In that case, just doing the following would work:

.vts-toggle__label {
    background: red;
}

But for instances where you want a custom style, my thoughts were to use a custom class:

<template>
  <VToggle class="my-custom-class" label="Click here to open the toggle">
    content
  </VToggle>
</template>

<style>
.my-custom-class .vts-toggle__label {
  background:red;
}
</style>

Of course your way works as well and might work better for the people that perfer using scoped. Just wanted to put some options out there.

[lbineau]

@Stegosource I wanted to style a specific instance (same than @jllagerberg as far as I understand).
The major benefit of CSS scope imo is when you have an application/widget integrated in a another plateform (a vueJS component inside a wordpress for instance). You don't have to fear your CSS is going to "leak" to the app website container.

@Stegosource in your case you are using a class to modify the button, while I'm using the context with the cascade. Both are fine regarding how we approach the architecture of the app.

But even in the case you want to style the same way all Vuetensils component, it is still possible to do it with scoped in the main App.vue and style your components with /deep/

<template>
<main class="my-app">
  <VToggle class="my-custom-class" label="Click here to open the toggle">
    content
  </VToggle>
</main>
</template>

<style lang="scss" scoped>
.my-app {
  & /deep/ {
    .vts-toggle__label {
      background:red;
    }
  }
}
</style>

To be clear I'm not asking you to add the feature as this is just fine. I prefer not to add complexity to useful library and wanted to share how I solved this use case.

[AustinGil]

@lbineau. Thanks for the clarification. This is great. I want to put together a cookbook for useful snippets. This should be one of them :)