UD5工具箱
使用教程与学习路径
本教程将引导您使用 CSS 作用域演示工具，通过循序渐进的学习路径掌握 Shadow DOM 样式隔离的核心知识。
第一步：了解工具界面
打开工具后，您会看到一个左右对比的界面布局。左侧标题通常标注为"普通 DOM"或"无 Shadow DOM"，右侧标注为"Shadow DOM"。两侧展示相同的组件结构但使用不同的封装方式。界面上方或侧方有场景切换按钮、注入样式按钮和重置按钮等操作控件。底部或侧方是知识点卡片区域。
第二步：体验类名冲突场景
从默认的类名冲突场景开始。观察左右两侧的组件表现：在左侧普通 DOM 模式下，组件 A 和组件 B 的同名类样式相互影响；在右侧 Shadow DOM 模式下，两个组件的样式互不干扰。通过这个场景理解为什么在大型项目中使用 Shadow DOM 可以有效避免样式冲突。
第三步：切换到样式泄漏场景
点击场景切换按钮进入样式泄漏演示。观察全局样式在两种模式下的不同表现：普通 DOM 中全局样式穿透到所有元素；Shadow DOM 中全局样式被隔离在组件外部。这是理解样式隔离边界的最直观演示。
第四步：探索全局 CSS 编辑器
尝试在全局 CSS 编辑器中编写自定义的 CSS 样式。例如，添加一条全局的 h3 { color: red; } 规则，观察这条规则在左侧和右侧的不同影响。通过亲手编写代码，加深对样式隔离行为的理解。
第五步：使用注入污染样式
点击"注入污染样式"按钮，观察全局样式突然变化对两种模式的影响。这个操作模拟了实际项目中引入第三方库后可能遇到的样式污染问题。对比两侧的效果，理解样式隔离在实际开发中的实用价值。
第六步：学习 CSS 变量穿透
切换到 CSS 变量穿透场景。这个场景展示了 CSS 自定义属性如何穿透 Shadow DOM 边界。在编辑器中修改 CSS 变量的值，观察变量值的变化如何同时影响普通 DOM 和 Shadow DOM 中的组件。理解 CSS 变量在 Web Components 架构中的主题定制作用。
第七步：了解 :host 选择器
切换到 :host 选择器场景。学习 :host 选择器如何允许在 Shadow Tree 内部选择和样式化宿主元素。这个选择器是 Shadow DOM 中唯一能从内向外影响的机制，理解它的使用场景和限制非常重要。
第八步：阅读知识点卡片
花时间阅读三个知识点卡片的内容。知识卡片提供了系统化的理论讲解，涵盖了样式隔离的原理、CSS 变量穿透的机制和 :host 选择器的语法。将理论知识与前面的可视化演示相结合，建立完整的知识体系。
第九步：自由探索实验
在掌握基础知识后，尝试使用重置功能清除所有修改，然后自由组合各种操作来探索更多 CSS 作用域的边界情况。例如，同时使用多个选择器、尝试嵌套组件结构等。这种主动探索的学习方式可以帮助您更深入地理解 Shadow DOM 的工作机制。