CSS @scope 作用域生成器

@scope（CSS 作用域，CSS Scoping Module Level 1）是 2024 年正式落地的原生 CSS 特性， 允许开发者把样式规则的作用范围限制在某个 DOM 子树内，而无需依赖 Shadow DOM 或 BEM 命名约定。 它解决了三大痛点：一是选择器冲突，过去全局样式容易意外影响其他组件，只能靠 BEM、CSS Modules 等命名约定规避；二是样式隔离成本高，Shadow DOM 虽能隔离样式，但会创建真实边界， 影响事件冒泡、表单参与、可访问性，成本较重；三是组件样式难以复用，组件的样式规则 一旦全局生效，放到不同上下文时可能产生意外覆盖。@scope 让样式隔离从"命名约定"或"真实边界" 升级为"轻量级作用域声明"，清晰可控且不破坏 DOM 结构。

@scope 有三种语法形式：
无根选择器：@scope { ... }，作用域匹配整个文档（少见）。
仅根选择器：@scope (.card) { ... }，样式仅作用于 .card 内部的后代元素。
根 + 下边界：@scope (.card) to (.content) { ... }，样式作用于 .card 内部， 但排除 .content 及其后代（甜甜圈作用域）。
根选择器决定"从哪里开始作用"，下边界决定"到哪里停止作用"。无下边界时样式覆盖整个根的后代子树； 有下边界时样式在边界处"打洞"，边界内的元素不被样式化。本工具的根选择器与下边界输入框分别对应这两个参数。

甜甜圈作用域是 @scope 最具差异化的能力——通过 to (boundary) 子句在作用域内"打洞"， 让边界内部的元素不被样式化，形成类似甜甜圈的"有洞"作用范围。 例如 @scope (.card) to (.content) { .title { color: red; } }， 会样式化 .card 内的 .title，但不会样式化 .content 内的 .title。 这在嵌套组件场景下极其有用——外层组件的样式不会渗透到内层组件区域，避免意外覆盖。 本工具的"甜甜圈作用域"预设直观展示了这一行为：标题在作用域内被样式化，而内容区内的同名元素被下边界排除。

在 @scope 内，:scope 与 & 都指向作用域根本身，但用法略有差异：
:scope 是 CSS 标准伪类，可直接作为选择器起始，如 :scope { padding: 16px; } 样式化作用域根本身，:scope > a 匹配作用域根的直接子级 a。
& 是嵌套选择器（需配合 CSS Nesting），指向作用域根，如 &.active 匹配 带有 active 类的作用域根。
两者在 @scope 中可互换使用。不以 :scope 或 & 起始的选择器会被自动视为"作用域根的后代选择器"， 如 .title 等价于 :scope .title。本工具的"作用域说明"面板会解析这些前缀， 展示每条规则的完整选择器（如 .card .title）。

两者都能实现样式隔离，但机制与成本不同：
@scope 是轻量级逻辑隔离——只在选择器匹配层面限制范围，不创建真实 DOM 边界， 不影响事件冒泡、表单参与、可访问性树，DOM 结构保持原样。适合组件级样式隔离、避免选择器冲突、 第三方内容嵌入等不需要强隔离的场景。
Shadow DOM 是物理级强隔离——创建真实 Shadow Root，样式完全无法渗透， 但同时事件需要 retarget、表单参与需要 attachInternals、可访问性需要额外处理，成本较高。 适合自定义元素（Web Components）、需要完全封装的可分发组件。
简单经验：能用 @scope 解决就不要用 Shadow DOM，需要强封装才用 Shadow DOM。

BEM 命名约定（如 .card__title、.card__title--active）通过人为约定唯一类名来避免冲突， 但依赖团队纪律维护，类名冗长且难以应对动态嵌套。@scope 从机制层面避免冲突—— 作用域内的选择器只在根子树内生效，即使选择器是简单的 .title，也不会影响作用域外的 .title。 这意味着可以用语义化短选择器替代冗长的 BEM 类名，且无需担心全局污染。 例如 @scope (.card) { .title { ... } } 中的 .title 只匹配 .card 内的标题，作用域外的 .title 完全不受影响。 本工具的"默认示例"预设展示了这一隔离行为。

兼容性：@scope 自 2024 年起在 Chrome 118+、Edge 118+、Safari 17.4+、Firefox 118+ 全主流浏览器原生支持， 覆盖率已超过 92%，可在生产环境放心使用。旧浏览器会忽略 @scope 块（样式不生效）， 建议作为渐进增强特性使用，或用 @supports (selector(@scope)) 做特性检测。
性能：@scope 的匹配在浏览器内部完成，性能与普通选择器相当，不会引入额外开销。 需要注意的是：作用域根匹配会在 DOM 变化时重新计算，若根选择器匹配大量元素（如 div）， 可能增加样式重算成本。建议根选择器尽量精确（如 .card 而非 div）， 下边界同理。本工具生成的代码即遵循这一最佳实践。

完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 作用域块编辑、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内， 不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox 属性限制能力，预览内容无法执行脚本、提交表单或访问父页面。
- 生成的 @scope CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 练习与生产场景。