Break Out of Scoped CSS

Published: August 12, 2019Updated: February 26, 2022

If you need to break out of CSS scoped to a component, it can be done with :deep, :slotted, and :global.

vue
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

Which will be compiled into this, allowing to select .b inside child components:

css
.a[data-v-f13b4d11] .b {
  /* ... */
}