Intermediate LevelVue JS
How does the :deep() pseudo-class selector style child component internals from a scoped parent?
❓ Interview Prompt: Explain :deep() pseudo-class in scoped CSS, penetrating child component boundaries, and styling 3rd-party UI library components.
In '<style scoped>', Vue appends 'data-v-hash' attributes to limit selectors to the current component. Standard scoped selectors cannot target DOM elements generated inside child components or third-party UI libraries (like Element Plus or PrimeVue).
The ':deep()' Selector:
To penetrate component boundaries and style nested child DOM elements from a parent scoped block, wrap the target selector in ':deep(.child-selector)'. PostCSS compiles this by appending the hash attribute to the parent selector before the deep class.
Code Implementation Example
html
<template>
<div class="modal-wrapper">
<ThirdPartyModal /> <!-- Renders <div class="modal-body"> internally -->
</div>
</template>
<style scoped>
/* Compiled to: .modal-wrapper[data-v-123] .modal-body { padding: 24px; } */
.modal-wrapper :deep(.modal-body) {
padding: 24px;
background: #f8f9fa;
}
</style>💡Penetrating child component CSS scopes using the :deep() selector.
🎯 Interview Key Takeaway
Use :deep(.target) in <style scoped> to style child component internals or third-party UI libraries.
#:deep#scoped CSS#Styling#Intermediate
Back to all Vue JS Questions→