Latest Update: The piercing selector in Vue 3 is now :deep(). For example:
.qtable :deep(tbody td) {
white-space: normal;
}
This will result in output like this:
.qtable[data-v-f3f3eg9] tbody td {
white-space: normal;
}
Initial Response:
Caution when using >>> with lang="scss"!
While >>> works as expected without specifying a lang (or setting it to css), the same cannot be said for lang="scss".
The only effective piercing selectors for lang="scss" (in Vue 2.x — v2.6.11) are /deep/ and ::v-deep.
I have tested with both node-sass and dart-sass packages, but the behavior remains consistent. It seems to be an issue at either the Vue package or Sass package level.
Interestingly, >>> is replaced by > > > in scss, rendering the code block ineffective. The desired behavior should be to remove >>> and not apply scoping attribute to subsequent parts of the selector (as done with other piercing selectors).
Note that this used to work previously, and I am unsure why or when it ceased to function. Personally, I have always favored using ::v-deep without any specific rationale.
To solve this issue, simply encapsulate everything within ::v-deep {}:
<style lang="scss" scoped>
::v-deep {
td:first-child {
background-color: #747480; /* no need for !important */
}
.q-table tbody td {
white-space: normal;
}
}
</style>
By doing so, the styles will be applied correctly.