深度解析HTML中的Shadow DOM：实现组件样式的完全隔离-html教程-PHP中文网

shadow dom 仅提供样式和 dom 查询隔离，不隔离 javascript；其核心是可控封装与显式定制入口，:host 和 ::slotted() 是唯一合规跨边界样式钩子，动态注入 css 需用 adoptedstylesheets 等方案确保作用域内生效。

深度解析html中的shadow dom：实现组件样式的完全隔离

Shadow DOM 本身不提供“完全隔离”，它只强制样式和 DOM 查询边界——外部 CSS 进不去，内部 CSS 出不来，但 JS 仍共享全局执行环境，document、window、事件冒泡等照常穿透。所谓“完全隔离”是误读，真正能落地的，是「可控的样式封装 + 显式暴露的定制入口」。

为什么 `!important` 和全局选择器在 Shadow DOM 里失效

不是权重不够，是浏览器压根不把外部样式规则纳入 shadowRoot 的样式计算流程。你在写 button { color: red !important; }，只要按钮在 shadowRoot 里，它就根本看不到这条规则。同理，/deep/、::ng-deep、>>> 已被 Chrome 120+、Firefox 115+ 移除，继续用等于主动放弃兼容性。

`:host` 和 `::slotted()` 是唯一合法的跨边界出口

W3C 规范只认这两个钩子，其余全是单向封闭：

:host 只匹配宿主元素自身（比如 <my-card></my-card> 这个标签），适合控制容器级样式：:host([disabled]) { opacity: 0.5; }、:host-context(.theme-dark) { background: #1e1e1e; }
::slotted(p) 只匹配传入 <slot></slot> 的顶层子节点（不递归），且仅支持可继承属性：color、font、line-height、background-color 等；禁止设 display、margin、width 等布局属性
别写 ::slotted(*) —— 不可靠，也违背封装初衷；slot 内容的布局责任本该由使用者承担

动态注入第三方 CSS（如 Foundation、Font Awesome）的正确姿势

不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样会加载到全局作用域，失去隔离意义。必须确保所有样式仅作用于该 shadow tree：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 DOMParser 解析 HTML 字符串，提取 <style></style> 和 <link> 标签内容
将 CSS 文本转为 CSSStyleSheet 实例（注意：Safari 16.4+、Chrome 73+ 才稳定支持 adoptedStyleSheets）
对 @import、相对路径（如 url(./img.png)）、CSS 变量继承链断裂等问题，需提前做资源代理或内联替换
若用 innerHTML = '<style>...</style>' 替换，旧 <style></style> 被销毁，CSSOM 规则丢失，可能引发 FOUC 或闪烁

`mode: "open"` 是绝大多数场景的合理选择

选 "closed" 并不能真正防住有心人，反而让 element.shadowRoot 返回 null，连 DevTools 都 inspect 不了，调试成本陡增。生产中只有极少数强审计要求的组件库（如银行级 UI 基建）才考虑 "closed"，且必须配套提供明确 API 接口。

重复调用 attachShadow() 会抛出 Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached 错误，务必在 constructor 中检查 this.shadowRoot 是否已存在。

真正容易被忽略的是：Shadow DOM 不隔离 JS 执行环境。内联 <script></script> 仍会在全局上下文执行，document.body.classList.add('dark') 依然会让整页变暗——这需要额外的沙箱机制，不是 attachShadow 能解决的。