shadow dom通过限制样式计算范围来减少计算量——浏览器直接跳过跨boundary选择器匹配，仅在shadowroot内部计算；需配合contain: strict生效，避免滥用::slotted(*)和innerhtml，推荐css自定义属性传递主题。

为什么Shadow DOM能减少样式计算量

它不靠“更快”，而是靠“算得更少”——浏览器在样式计算阶段直接跳过跨 boundary 的选择器匹配，把计算范围严格限制在 shadowRoot 内部。外部写 button { color: red }，只要按钮在 shadow 里，这条规则连解析都不会进；同理，shadow 内的 .item:hover 也不会影响 light DOM 中任何同名类。实际性能提升取决于你原本有多少全局复杂选择器和多少元素被波及。

必须加 contain: strict 才生效

很多人 attachShadow 后发现卡顿没改善，问题常出在这：没给 shadow 根容器加渲染边界声明。没有 contain: strict，浏览器仍可能为 layout、paint 做全局依赖检查，隔离就只是“视觉上”的。

Wechat HTML Publisher

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

下载

• 正确做法：在 shadow 内部 <style></style> 中给 :host 或根容器设 contain: strict
• 错误写法：shadowRoot.innerHTML = '<div>...</div>' 后再用 JS 动态加 style —— 此时样式节点未挂载，contain 不生效
• 注意：Safari 16.4+、Chrome 73+ 支持良好，旧版需降级为 contain: layout paint

避免在 shadow 内滥用 ::slotted(*) 和动态 innerHTML

::slotted(*) 看似方便统一控制插槽内容，但它会触发浏览器对所有分发节点做样式重计算，尤其当 slot 内有大量子元素时，开销翻倍；而频繁赋值 shadowRoot.innerHTML 会销毁旧树、重建节点、重绑事件、强制全量样式重排。

• 替代方案：用 DocumentFragment 批量更新，或用 Lit/Hybrids 等库的差异 diff 渲染
• 禁止写 ::slotted(*) { margin: 1rem; } —— margin 不可继承，该声明完全无效，DevTools 里都看不到
• slot 内容变更不会自动重绘，要监听 slotchange 并节流处理，别在 handler 里立刻读 offsetHeight

样式变量传递比选择器穿透更轻量

想让主题色透入 shadow，别写 :host-context(.dark) .btn 这种高权重选择器——它仍参与匹配，且耦合宿主 class 名。用 CSS 自定义属性才是零匹配开销的方案。

• 外部设置：<my-card style="--text-color: #1e1e1e;"></my-card>
• shadow 内消费：.label { color: var(--text-color, #333); }
• 变量必须设在宿主元素或其祖先上，document.documentElement 上设的 :root 变量也能读取
• 禁用 !important 和 /deep/：这些在 Chrome 120+、Firefox 115+ 已移除，写了等于白写

真正起作用的从来不是“用了 Shadow DOM”，而是你有没有把它当做一个独立渲染单元来管：样式不越界、布局不外溢、更新不盲目。漏掉 contain、乱用 innerHTML、硬塞 ::slotted(*) 布局属性，隔离就只是假隔离。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！