This text is inside the scope and will have @scope styles applied.
This text is outside the scope and will not have @scope styles applied.
CSS @scope is a new CSS feature that allows you to limit style rules to a specific DOM subtree. Unlike Shadow DOM, @scope doesn't require creating a separate DOM tree - it's a pure CSS solution.
@scope (<scope-root>) [to (<scope-limit>)] { rules }
Scope Root - The root element where styles apply. Only descendants of this element will match the rules.
Scope Limit - Optional boundary. Styles won't apply to the limit element and its descendants.
Donut Scope - A @scope with a limit creates a "donut" scope, with a hole in the middle.
✅ Chrome 118+ | ✅ Edge 118+ | ✅ Safari 17.4+ | 🔄 Firefox (in development)
Yes, completely free. No registration required.
CSS @scope is a new CSS feature that limits style rules to a specific DOM subtree, preventing style leakage.
@scope is a pure CSS solution. Shadow DOM provides stronger encapsulation but requires more setup.
Chrome 118+, Edge 118+, Safari 17.4+ support it. Firefox is implementing it.
No. All processing happens locally in your browser.