How to Style Child Components in Vue.js Using Deep Selectors?

Applying Styles to Child Components in Vue.js: /deep/, >>>, and ::v-deep

In Vue.js, you can use deep selectors to style elements within child components. However, attempting to use the /deep/, >>>, or ::v-deep operators in style rules may not work as expected. Here's a guide on how to correctly use these operators.

Vue 2.0 - 2.6

• Sass:

  Use ::v-deep before the selector to apply styles to elements within child components.

  ::v-deep .child-class {
    background-color: #000;
  }

• Without Sass:

  Use >>> before the selector to achieve the same effect.

  >>> .child-class {
    background-color: #000;
  }

Vue 3 (and Vue 2.7)

• Unified Syntax:

  Use :deep() as a selector, enclosing the target element selector within parentheses. This syntax works with or without Sass.

  :deep(.child-class) {
    background-color: #000;
  }

• Deprecated Syntax:

  The ::v-deep prefix is now deprecated in Vue 3. The >>> operator is also deprecated.

Vue 3 New Selectors

• Slot Content:

  Use :slotted() to style content passed through slots.

  :slotted(.slot-class) {
    background-color: #000;
  }

• Global Styles:

  Use :global() to register global styles from a scoped component.

  :global(.my-class) {
    background-color: #000;
  }

Scoping Requirement

In all versions of Vue, the