How to Style Child Components in Vue.js Using /deep/, >>>, ::v-deep, and :deep?

>>, ::v-deep, and :deep? " />

How to Use /deep/, >>>, or ::v-deep in Vue.js

When working with component structures in Vue.js, applying style rules to elements within child components becomes necessary. Here, Vue provides several options to achieve this: /deep/, >>>, and ::v-deep.

Vue 2.0 - 2.6

Sass: Utilize ::v-deep to penetrate child component boundaries:

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

Plain CSS: Employ >>> to achieve the same effect:

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

Vue 3 (and Vue 2.7)

Unified Selector: Vue 3 introduces :deep as the unified selector, regardless of Sass usage:

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

Slot Content: Styling elements passed through slots:

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

Global Styles: Applying styles globally from scoped components:

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

Key Considerations:

• All styles must be defined within scoped