UD5工具箱
核心功能与演示场景
CSS 作用域演示工具提供了多种功能模块，从预设场景演示到实时编辑再到知识点讲解，覆盖了 CSS 作用域学习的各个方面。
预设演示场景
工具内置了四种精心设计的预设演示场景，每种场景针对 CSS 作用域的一个核心知识点。用户可以通过工具界面上的场景切换按钮快速切换不同的演示场景。预设场景的设计经过精心考量，确保每个场景都能直观清晰地展示对应的样式隔离效果，降低学习者的理解门槛。
类名冲突演示
类名冲突场景演示了传统 CSS 中最常见的问题。当两个不同的组件使用相同的类名时，在普通 DOM 模式下它们的样式会相互影响。但在 Shadow DOM 模式下，每个组件内部的类名只作用于自己的 Shadow Tree，不会与其他组件产生冲突。通过左右对比，用户可以清楚地看到 Shadow DOM 如何从根本上解决类名冲突问题。
样式泄漏演示
样式泄漏场景展示了全局 CSS 样式对组件内部的影响。在普通 DOM 模式下，全局定义的样式规则会自动应用到页面上的所有元素，包括组件内部的元素。而在 Shadow DOM 模式下，全局样式无法穿透 Shadow 边界影响组件内部。这一对比直观地说明了 Shadow DOM 的样式隔离边界。
CSS 变量穿透演示
CSS 变量穿透场景演示了一个特殊的行为：虽然 Shadow DOM 隔离了普通 CSS 规则，但 CSS 自定义属性（CSS 变量）具有穿透 Shadow 边界的特性。这使得 CSS 变量成为在 Shadow DOM 环境中实现主题定制和组件通信的重要机制。用户可以通过该场景理解 CSS 变量在 Web Components 架构中的独特作用。
:host 选择器演示
:host 选择器场景展示了 Shadow DOM 中用于选择宿主元素的特殊伪类选择器。:host 选择器允许在 Shadow Tree 的样式表中选择包裹 Shadow Tree 的宿主元素。这是 Shadow DOM 中唯一的可以从内部影响外部元素的选择器。通过该场景，用户可以理解 :host 选择器的用途和使用方法。
全局 CSS 编辑器
工具提供了内嵌的全局 CSS 编辑器，用户可以直接在编辑器中编写 CSS 代码。编辑器中的样式会实时应用到演示区域，用户可以即时看到样式修改的效果。编辑器支持基本的代码编辑功能，是探索 CSS 作用域行为的强大工具。用户可以尝试添加不同的选择器和属性，观察在普通 DOM 和 Shadow DOM 两种模式下的不同表现。
左右对比模式
工具的核心界面采用左右对比布局。左侧展示普通 DOM（无 Shadow DOM）模式下的效果，右侧展示 Shadow DOM 模式下的效果。两种模式使用完全相同的 HTML 结构和 CSS 样式规则，唯一的区别在于是否使用了 Shadow DOM 封装。这种设计让用户可以一目了然地对比两种模式的差异，深刻理解 Shadow DOM 的隔离效果。
注入污染样式功能
工具提供了"注入污染样式"按钮，点击后会在全局样式中添加一些具有"污染性"的 CSS 规则。这些规则模拟了第三方库或不规范代码可能带来的全局样式影响。通过观察这些污染样式在普通 DOM 和 Shadow DOM 中的不同影响，用户可以理解为什么样式隔离在现代 Web 开发中如此重要。
组件模拟系统
工具内置了三个组件模拟（组件 A、组件 B、组件 C），每个模拟组件代表一个独立的 Web 组件实例。组件使用相同的类名结构但应用不同的样式，展示了在有无 Shadow DOM 的情况下组件之间的样式关系。组件模拟系统是理解样式隔离实际应用效果的重要辅助工具。
知识点卡片
工具设计了三个知识点卡片，分别深入讲解样式隔离、CSS 变量穿透和 :host 选择器的理论知识。每个知识卡片包含概念解释、使用场景和注意事项，为用户提供了系统化的学习内容。知识卡片与可视化演示相互配合，帮助用户建立完整的 CSS 作用域知识体系。