CSS @scope 规则生成器
使用 @scope 实现样式作用域隔离，控制样式的上限和下限边界
Scope 配置
外部
样式不生效
→
样式不生效
@scope 根
.my-component
→
.my-component
内部元素
样式生效
样式生效
@scope 特性说明：
• 上限 (root)：@scope 内的样式只匹配根选择器及其后代元素
• 下限 (limit)：使用 to() 指定下限边界，样式不会穿透到 limit 选择器匹配的子树
• 与 Shadow DOM 不同：@scope 是纯 CSS 方案，不需要 JavaScript
• 嵌套支持：可在 @scope 内使用 & 引用 scope root
• 上限 (root)：@scope 内的样式只匹配根选择器及其后代元素
• 下限 (limit)：使用 to() 指定下限边界，样式不会穿透到 limit 选择器匹配的子树
• 与 Shadow DOM 不同：@scope 是纯 CSS 方案，不需要 JavaScript
• 嵌套支持：可在 @scope 内使用 & 引用 scope root
输出代码