CSS @scope Is Baseline Now. Here's a Playground to Actually See How It Works

@scope reached Baseline in December 2025, which means Chrome, Edge, Safari, and Firefox all ship it in stable. That's great news, except most explanations of @scope are still static code blocks, and a scoping rule is exactly the kind of feature that's hard to reason about without watching it run.

So I built ScopeLab, a live editor for @scope. You write HTML in one pane and CSS in the other, and the browser's own @scope engine renders the result inside a sandboxed iframe. No polyfill, no custom parser standing between your code and the outcome.

The interesting part is the highlight layer. It reads the scope root and optional limit straight out of your first @scope rule and draws outlines accordingly: solid green for the root, dashed green for in-scope descendants, dashed red for anything past a scope limit. Because that highlight is itself implemented as an @scope rule, it can never disagree with what the browser is actually doing.

There's also a Without @scope toggle that strips the wrappers so the same selectors apply globally, which is the fastest way to see the exact leak that @scope was built to stop.

If you've ever been unsure how scope limits create a "donut scope," or how proximity to the scope root affects specificity ties, this is built to make that click. I walk through the syntax reference and real scoping scenarios (component containment, protecting nested widgets, excluding third-party iframes) here: https://devencyclopedia.com/tools/scopelab