Hey again! Guess what? I have a very cool tip to share with you made by a great dev who you most probably know.

But that’s for the next week, so let’s see this one’s!


In the The importance of scoped CSS in Vue.js you saw why scoped CSS is important when we want to achieve style encapsulation in components. If you haven’t read that tip, I strongly suggest you to do so to understand this one.

But when we tried to turn the style of that example into scoped CSS, the styles were missing.

Here’s the thing: when you use scoped CSS, you can modify the root element of the component you want to customise.

In other words, from BlueList.vue and RedList.vue of the example we can only modify the .list class of BaseList.vue since it’s the root element of that component.

But what about inner elements? We want to style the .list-item class to change the color of the items.

For that, we have the /deep/ selector, and you can use it to access inner elements of components as follows:

<style scoped>
.list /deep/ .list-item {
  color: white;
  background: #42a5f5;
}
</style>

Take a look at the updated example and see how now it works as expected and each of them have a different color.

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex

Start saving time and get a tip about the Vue ecosystem every week, right in your inbox.

    Latest Vue Jobs