Simon Willison·· 22 天前AI 评分16
用可交互示例讲解 Shadow roots
Shadow roots, explained with live examples
AI 导读
一篇用可交互示例讲解 shadow DOM 的教程，演示样式封装、继承、slot、part 以及 JavaScript 访问方式。内容说明 shadow root 如何创建带私有样式表的隔离 DOM 树，并与页面 DOM 以特定受控方式交互；文中提示词指向 Fable 5.1 Medium。
正文
Tool Shadow roots, explained with live examples — Learn about shadow DOM through interactive examples that demonstrate style encapsulation, inheritance, slots, parts, and JavaScript access. Explore how shadow roots create isolated DOM trees with private stylesheets and elements that interact with the page DOM in specific, controlled ways.
Prompt to Fable 5.1 Medium:
Build an artifact to explain shadow roots in CSS with interactive examples
来源：Simon Willison · simonwillison.net