Intermediate LevelCSS & Modern Layouts
What is the CSS @scope rule for component-scoped styles?
❓ Interview Prompt: Explain @scope for creating style boundaries without Shadow DOM or CSS-in-JS.
@scope creates style boundaries that limit selector matching to a specific DOM subtree:
Syntax:
@scope (.card) { /* styles only apply inside .card */ }
With Lower Boundary:
@scope (.card) to (.card-footer) { } — styles apply inside .card but stop before .card-footer, preventing styles from leaking into footer content.
Benefits:
•
No naming conventions required (BEM, CSS Modules).
•
No Shadow DOM complexity.
•
Scoped specificity: selectors within @scope have lower specificity than equivalent un-scoped selectors.
Code Implementation Example
css
/* Styles scoped to .card, stopping at .card-footer */
@scope (.card) to (.card-footer) {
p { color: #886f68; } /* Only <p> inside .card */
a { text-decoration: none; } /* Only <a> inside .card */
}
/* Footer has its own scope */
@scope (.card-footer) {
a { color: #3d2c2e; font-weight: 600; }
}💡Scoped styles with upper and lower boundaries.
🎯 Interview Key Takeaway
@scope provides native CSS component scoping without BEM naming or Shadow DOM encapsulation.
#@scope#Scoping#Components#Intermediate
Back to all CSS & Modern Layouts Questions→