DEV Community

Cover image for Mastering Scoped CSS in Vue: Deep Selectors, Slotted Content, Global Styles, and More
Dharmendra Kumar
Dharmendra Kumar

Posted on

Mastering Scoped CSS in Vue: Deep Selectors, Slotted Content, Global Styles, and More

Learn how to effectively style your Vue components using scoped CSS features like deep selectors, slotted selectors, global styles, CSS modules, and dynamic v-bind() in both Vue 2 and Vue 3.


1. Deep Selectors

Vue 2: Options API

<template>
  <div class="parent">
    <div class="child">Styled via Deep Selector</div>
  </div>
</template>

<style scoped>
.parent {
  background-color: lightgrey;
  padding: 20px;
}

/* Deep selector for child elements */
>>> .child {
  color: blue;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Vue 3: Composition API

<template>
  <div class="parent">
    <div class="child">Styled via Deep Selector</div>
  </div>
</template>

<style scoped>
.parent {
  background-color: lightgrey;
  padding: 20px;
}

/* Deep selector with :deep() */
:deep(.child) {
  color: blue;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • Vue 2: Use >>> for deep selectors.
  • Vue 3: Use :deep() to style elements deeply within a component.

2. Slotted Selectors

<template>
  <div>
    <slot>
      <div class="default-slot">This is default slot content</div>
    </slot>
  </div>
</template>

<style scoped>
/* Slotted selector to style content inside slots */
:slotted(div) {
  border: 2px solid red;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

Use :slotted() to apply styles to content passed into a slot. This allows the parent component to control how slot content is styled.


3. Global Selectors

<template>
  <div class="global-styled">This text is globally styled</div>
</template>

<style scoped>
/* Global selector for specific classes */
:global(.global-styled) {
  color: purple;
  font-weight: bold;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

Use :global() to apply styles globally, ensuring they are accessible across your entire app. This is useful for creating styles that need to be shared between multiple components.


4. Mixing Local and Global Styles

<template>
  <div>
    <p class="local-style">This text is styled locally</p>
    <p class="global-style">This text is styled globally</p>
  </div>
</template>

<style>
/* Global style */
.global-style {
  color: purple;
}
</style>

<style scoped>
/* Local style */
.local-style {
  color: teal;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

You can mix both global and scoped styles in a single component by separating the styles into different <style> blocks. This helps manage local and global CSS efficiently.


5. CSS Modules

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

CSS Modules hash class names to avoid collisions and scope them to the component. Use the module attribute on your <style> tag to enable this feature.


6. Custom Inject Name

<template>
  <p :class="classes.red">This text is red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

You can customize the key of the injected classes object by assigning a name to the module attribute. In this case, classes becomes the key.


7. Dynamic CSS with v-bind()

Vue 2: Options API

<template>
  <p>This text is dynamically styled</p>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    };
  }
}
</script>

<style scoped>
p {
  color: v-bind(color);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Vue 3: Composition API

<template>
  <p>This text is dynamically styled</p>
</template>

<script setup>
import { ref } from 'vue';
const color = ref('red');
</script>

<style scoped>
p {
  color: v-bind(color);
}
</style>
Enter fullscreen mode Exit fullscreen mode

Explanation:

With v-bind(), you can dynamically bind CSS values to your component's state. This allows your styles to react to changes in data or props.


Conclusion

These advanced scoped CSS features in Vue.js give you fine-grained control over how styles are applied to your components. Whether you need deep selectors, global styles, or dynamic CSS properties, Vue provides the flexibility to handle it all efficiently in both Vue 2 and Vue 3.

By combining these techniques, you can build more maintainable and powerful applications with scoped and dynamic styling!

Top comments (0)