Shadow roots, explained with live examples — 用可交互示例讲清 CSS shadow DOM 的隔离机制，前端开发者理解组件封

• 文章用可交互示例解释 shadow roots：shadow DOM 内部的样式与外部文档相互隔离，外部选择器默认无法穿透边界。对做 Web Components 或嵌入式 UI 的开发者来说，这意味着组件样式可以真正自包含，不必再靠命名约定防冲突。
• 示例是借助 Fable 5.1 生成的可交互 artifact，把抽象概念变成可点开、可观察的演示。这提示 agent 工具链的一个实用模式：让模型直接产出可运行的交互式教学页面，比纯文字解释更易验证正确性。
• 文章聚焦 CSS 层面的 shadow roots 行为，而非框架封装细节。对工具链的含义是，涉及 DOM 隔离的调试与自动化测试需要显式处理 shadow boundary，普通选择器查询会失效。

原文：Shadow roots, explained with live examples · 作者 Simon Willison