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>

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>

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>

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>

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>

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>

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>

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>

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>

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!