# 用可交互示例解释 Shadow roots

> 原标题：Shadow roots, explained with live examples

- 来源：Simon Willison
- 发布时间：2026-09-23T16:37:18.000Z
- AX AI 日报：https://ai-daily.ax0x.ai/items/vi3gtqlo8p40ow2pw7soev3uz
- 原文：https://simonwillison.net/2026/Sep/23/shadow-roots/

## 摘要

一篇用可交互示例讲解 shadow DOM 的教程，演示样式封装、继承、slots、parts 以及 JavaScript 访问方式，展示 shadow root 如何创建带私有样式表和元素的隔离 DOM 树，并与页面 DOM 以特定受控方式交互。该示例由 Fable 5.1 Medium 根据提示词生成。