Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
@scope rule limits styles to a specific DOM subtree. Perfect for component isolation without CSS Modules or CSS-in-JS!/* Scope styles to .card elements */
@scope (.card) {
/* Only affects elements inside .card */
h2 {
color: blue;
}
p {
font-size: 14px;
}
}
/* HTML:
<div class="card">
<h2>Styled ✓</h2>
<p>Styled ✓</p>
</div>
<h2>Not styled ✗</h2>
*/@scope (.card) only affect elements inside .card!Use to keyword to stop scope at specific elements:
/* Scope to .article, but stop at .comments */
@scope (.article) to (.comments) {
p {
line-height: 1.8;
}
}
/* HTML:
<article class="article">
<p>Styled ✓</p>
<div class="comments">
<p>NOT styled ✗</p>
</div>
</article>
*/Stop at nested widgets
@scope (.widget) to (.nested-widget)Stop at nested sections
@scope (.section) to (.section)Style header, stop at body
@scope (.card) to (.card-body)<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🎯 @scope Demo</h1>
<div class="card-blue">
<span class="label">Scoped to .card-blue</span>
<h2>Blue Card Heading</h2>
<p>This paragraph has blue scoped styles!</p>
</div>
<div class="card-green">
<span class="label">Scoped to .card-green</span>
<h2>Green Card Heading</h2>
<p>This paragraph has green scoped styles!</p>
</div>
<div class="outside">
<span class="label">Outside scope</span>
<h2>Regular Heading</h2>
<p>Not affected by @scope rules - different styling!</p>
</div>
</div>
</body>
</html>Loading preview...
Use & to reference the scope root:
@scope (.card) {
/* & refers to .card */
& {
padding: 20px;
}
/* Same as .card:hover */
&:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Same as .card.active */
&.active {
border: 2px solid blue;
}
}