Shadow DOM 是什么，不是什么
它不是新语法或框架特性，而是浏览器原生的 DOM 分离机制。核心作用是让一段 HTML、CSS 和 JS 在逻辑上“自包含”——外部样式进不去，内部样式出不来，
默认查不到里面节点。
常见错误现象：
找不到影子树里的按钮；给
写的全局 CSS 没影响到组件内部文字颜色。
使用场景：Web Components 封装可复用 UI（如自定义
）、避免样式冲突、实现样式作用域隔离。
如何创建一个基本 Shadow DOM
必须通过
方法挂载，不能直接写 HTML 或用模板字符串硬塞。它返回一个
对象，后续操作都得在这个根上进行。
立即学习
“
前端免费学习笔记（深入）
”；
实操建议：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
是最常用方式，允许 JS 从外部访问影子树；设为
后，
返回
，调试困难，慎用
不要在影子根里直接写
标签再 innerHTML 插入，应使用
或构造
影子树不继承父级的
、
等属性，需显式重置或使用
样式穿透和跨边界通信怎么处理
Shadow DOM 的样式隔离是默认行为，但不是铁壁。外部样式想影响内部，只能靠
、
、
这几个伪类，且支持度有限；内部想暴露接口给外部，得靠自定义事件或公开方法。
容易踩的坑：
只能匹配宿主元素自身 class，不能匹配其子元素的 class
只能选中被
投影进去的内容，对影子树内原生节点无效
用
才能让事件冒泡出 Shadow DOM；漏掉
，外部监听就收不到
兼容性和性能要注意什么
所有现代浏览器都支持
，但 IE 完全不支持，连
都不行。如果要兼容旧环境，得用 polyfill（如
），但它无法完美模拟样式隔离。
性能方面，每个 ShadowRoot 都有独立样式计算和布局上下文，嵌套过深或频繁切换
会增加开销；大量使用
且内容复杂时，重排可能变慢。
关键提醒：Shadow DOM 不等于 Web Components 全套，它只是其中一环。没用
注册，光有 shadowRoot 也只是个隔离容器，不会自动升级、不响应生命周期钩子。
querySelectordocument.querySelector('.my-button')bodymy-modalattachShadow()ShadowRootelement.attachShadow({ mode: 'open' })'closed'element.shadowRootnullappendChild(document.createElement('style'))CSSStyleSheetfont-familycolorinherit::slotted():host:host-context():host(.active) { ... }::slotted(*)dispatchEvent(new CustomEvent('change', { composed: true }))composed: trueattachShadowcustomElements.define@webcomponents/webcomponentsjsmodeslotcustomElements.define