Vue.js: “data-v-” attributes for scoped CSS

Asked By: Anonymous

In .vue files, scoped CSS is a very powerful feature as it allows the CSS to be applied on the current component only. Let’s start with an example. According to the documentation, vue-loader will transform the following code:

<style scoped>
.example {
  color: red;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
</style>

<template>
  <div class="example">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</template>

into:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
ul[data-v-f3f3eg9] {
  list-style-type: none;
}
li[data-v-f3f3eg9] {
  display: inline-block;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>
    <ul data-v-f3f3eg9>
      <li data-v-f3f3eg9>1</li>
      <li data-v-f3f3eg9>2</li>
    </ul>
  </div>
</template>

As we see, every nodes of the component have a data-v-f3f3eg9 attribute. We already understand that in a big project, with multiple components and their own scoped CSS, we will observe the omnipresence of data-v-<hash> attributes. There are (I think) at least two consequences of such data-v-<hash> approach:

• In the race for the best CSS optimizer to get the smaller file, this approach ends up with very big CSS files.
• The efficiency of the parsing of the DOM tree must be affected.

My question is : why Vue.js adopted this strategy ?

Indeed, as each component template must contain exactly one root element, it can by itself define the scope of the CSS, having alone the data-v-f3f3eg9 attribute. Moreover, it could have been an additional short class name, such as only cf3f3eg9 (the c here ensures that the class name does not start with a digit):

<style>
.example.cf3f3eg9 {
  color: red;
}
.cf3f3eg9 ul {
  list-style-type: none;
}
.cf3f3eg9 li {
  display: inline-block;
}
</style>

<template>
  <div class="example cf3f3eg9">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</template>

And we can more easily adopt a rename process for our entire project.

Solution

Answered By: Anonymous

With your approach, specificity of selectors changes differently: the deeper the element is, the longer is its selector chain. Unequal specificity can open door to very subtle bugs – reproducible, yes, but still subtle. To add insult to injury, you won’t be able to spot these bugs by looking at the code alone – you’ll have to check the builds.

Still, if this is not a problem for your methodology and/or project scope, you can still employ this approach with vuejs-loader. Quoting the doc:

If you want a selector in scoped styles to be “deep”, i.e. affecting
child components, you can use the >>> combinator:

<style scoped> 
.a >>> .b { /* ... */ } 
</style>

The above will be
compiled into:

.a[data-v-f3f3eg9] .b { /* ... */ }

Some pre-processors, such as SASS,
may not be able to parse >>> properly. In those cases you can use the
/deep/ combinator instead – it’s an alias for >>> and works exactly
the same.