[Vuejs]-When using scoped styles in Vuejs is it possible to supply the signature string?

by

0👍

In short, this is not possible.

-1👍

As mentioned in the comments above I can think of 3 ways to solve this problem manually if providing the signature string is not possible.

The draw back to all of these are that they are manual process. Also Vue will still have some style collisions if you choose a name that is used in other code. For example if you use the class name ‘wrapper’ your class will still collide with any other ‘wrapper’ class. So named classes will still need to be unique.

  1. Use a wrapper with a named class.
    This will allow for targeting the children and still have scoped styles. This is the simplest but also the most likely to have collisions.
<template>
  <div class="class-for-scoped-styles">
    <h1>this is a title</h1>
    <p>this is a paragraph</p>
  </div>
</template>

<style>
.class-for-scoped-styles h1 {
  color: red;
  background-color: black;
}

.class-for-scoped-styles p {
  font-style: italic;
}
</style>
  1. Add scoped names to each tag.
    A bit less likely to have collision problems.
<template>
  <div>
    <h1 class="class-for-scoped-styles">this is a title</h1>
    <p class="class-for-scoped-styles">this is a paragraph</p>
  </div>
</template>

<style>
h1.class-for-scoped-styles {
  color: red;
  background-color: black;
}

p.class-for-scoped-styles {
  font-style: italic;
}
</style>
  1. Use a named prefix and a named classes for each tag.
    I believe this manually doing what the using css modules – but doing it manually.
    This is least likely to incur collisions but also is the most verbose and easiest to inject manual coding errors.
<template>
  <div>
    <h1 class="class-for-scoped-styles blog-entry-title">this is a title</h1>
    <p class="class-for-scoped-styles blog-entry-description">this is a paragraph</p>
  </div>
</template>

<style>
.class-for-scoped-styles.blog-entry-title {
  color: red;
  background-color: black;
}

.class-for-scoped-styles.blog-entry-description {
  font-style: italic;
}
</style>

All these would allow for scoped styles and still allow for easy theme insertion or third party custom styles. I’m still looking into using css modules and that might ultimately be the best solution.

Leave a comment