Style inner elements in scoped CSS using /deep/ selector in Vue.js

Alex Jover Morales

Alex Jover Morales

May 12, 2019
1 min read
Share on Twitter or LinkedIn

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;

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

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Creating UI components based on a Design System in Vue.js

Don't you know the benefits of using a Design System? Not sure how to structure your Vue.js components in an app? Read the article and find it out.

Alex Jover Morales

Alex Jover Morales

Jul 21, 2020

How to structure a Vue.js app using Atomic Design and TailwindCSS

Unsure about how to organize your Vue.js components? Learn in this tutorial how to do it using Atomic Design methodology. Examples and demos included!

Alba Silvente

Alba Silvente

Jun 16, 2020

Theming using CSS Custom Properties in Vue.js Components

Learn in this article how to theme your applications and components by leveraging the power of CSS Custom Properties in your Vue.js components

César Alberca

César Alberca

Nov 5, 2019


VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Learning Partner