What attribute scopes styles to a Vue component?

WHAT THIS TESTS: This question tests whether you know the canonical Vue mechanism for style encapsulation in Single-File Components. At the senior level, it is not enough to name the attribute; the interviewer wants to hear that you understand the compilation strategy, the boundary behavior with child components, and the performance implications of attribute selectors.

A GOOD ANSWER COVERS: A strong response starts with the scoped attribute on the style tag. Next, explain that Vue uses PostCSS to rewrite selectors by appending a unique data-v-hash attribute to both the generated CSS and the component's DOM elements. You should mention that this prevents styles from leaking into sibling or parent components. Then clarify the child root element behavior: a parent scoped style can still affect a child component's root node by design, because Vue intentionally applies both the parent's and child's scope attributes to that root node. Finally, show awareness of the deep penetration tools by naming :deep() for styling inside child components, :slotted() for slot content, and :global() for exceptions.

COMMON WRONG ANSWERS: A red flag is answering with manual naming conventions like BEM as the primary Vue solution. Another mistake is stating that scoped styles create perfect Shadow DOM isolation; they do not, and child roots are deliberately affected. Candidates also err by confusing scoped with CSS Modules, which uses module and exposes $style classes rather than attribute-based scoping. Finally, claiming that scoped styles eliminate the need for classes is incorrect; element selectors like p when scoped become attribute combinations that browsers render slowly, so classes remain important.

LIKELY FOLLOW-UPS: An interviewer might ask how scoped styles differ from CSS Modules in Vue. They may also ask about the performance cost of attribute selectors or how to style content injected via v-html inside a scoped component. Another common follow-up is how to mix global and scoped styles in the same SFC, which you answer by using two separate style tags.

ONE CONCRETE EXAMPLE: Imagine a Card.vue component with a style tag using scoped. Vue compiles .card { border: 1px solid black; } into .card[data-v-7ba5bd90] { border: 1px solid black; } and adds data-v-7ba5bd90 to the root div of Card.vue. If Card.vue is used inside App.vue, and App.vue also has scoped styles, App.vue's .wrapper selector becomes .wrapper[data-v-abc123] and will not leak into Card.vue's interior. However, App.vue could target Card.vue's root element directly because that root carries both data attributes.