When working with scoped CSS in Vue.js you may need to style elements inside child components from a parent component. By default scoped styles do not penetrate into child components but Vue provides special selectors to allow this: /deep/, >>>, ::v-deep and the modern :deep() pseudo-class.
How the >>> or /deep/ Works
The >>> (sometimes called the "deep combinator" or "descendant combinator") and its alias /deep/ (which was widely used in older versions) allowed you to "pierce" through the style encapsulation of a child component.
Deprecated Syntax
/deep/ and >>> were the original ways to write deep selectors in Vue 2.
<template> <MyChildComponent />
</template>
<style scoped>
/* Using >>> */
.parent >>> .child {
color: red;
}
/* Using /deep/ */
.parent /deep/ .child {
color: red;
}
Also Read: The Top Vue Developer Tools For Easy Coding
The Recommended Approach: :deep() Pseudo-class
In Vue 3 (and in newer versions of Vue 2), >>> and /deep/ have been superseded by the :deep() pseudo-class. This is the official and recommended way to apply deep selectors when you absolutely need to.
Example:
<style scoped>.parent :deep(.child-class) {
color: red;
}
</style>
Key Takeaway
The >>> and and /deep/ are deprecated for styling deeply nested elements within scoped Vue components. The modern and correct way to achieve this is using the :deep() pseudo-class.
Use it cautiously as it bypasses the benefits of CSS scoping and can lead to less maintainable styles. Prioritize props, slots and CSS variables for styling child components whenever possible.
