Shadow DOM 通过限制样式计算范围减少浏览器工作量，关键在“少算”而非“快”；需配置 contain: strict 划定渲染边界、避免 ::slotted(*) 和 innerHTML 频繁赋值，并优先用 CSS 自定义属性和外部样式表。
Shadow DOM 本身不“加速”样式加载，而是通过限制样式计算范围来减少浏览器工作量——关键不在“快”，而在“少算”。真正起效的前提是正确配置渲染边界和避免常见误用。
加 contain: strict 明确划定渲染边界
没它，Shadow DOM 的隔离只是视觉上的。浏览器仍可能为 layout/paint 做全局依赖检查，样式计算不会真正收缩。
- 在 shadow 内部的
<style>中，给:host或根容器设置contain: strict - 不要等 attachShadow 后再动态插入 style 标签——此时样式节点未挂载，contain 不生效
- Safari 16.4+、Chrome 73+ 支持良好；旧版可降级为
contain: layout paint
避免触发全量重计算的操作
这些写法会让 Shadow DOM 的隔离优势失效，甚至比普通 DOM 更慢：
- 慎用
::slotted(*)：它强制浏览器遍历所有分发节点重算样式，尤其内容多时开销翻倍 - 禁用
shadowRoot.innerHTML = '...'频繁赋值：每次都会销毁旧树、重建节点、重绑事件、强制同步布局 - 改用 DocumentFragment 批量挂载，或使用 Lit/Hybrids 等支持 diff 的库做局部更新
用 CSS 自定义属性代替穿透式选择器
想让主题色、尺寸等透入组件？别用 :host-context(.dark) .btn 这类高权重选择器——它仍参与全局匹配，且耦合宿主 class 名。
- 外部设置：
<my-card style="--text-color: #1e1e1e;"></my-card> - shadow 内消费：
.label { color: var(--text-color, #333); } - 变量必须设在宿主元素或其祖先上（
:root也有效），零匹配开销
优先使用外部样式表而非内联 style
多个组件实例共享同一份 CSS 文件，能充分利用浏览器缓存，减少重复解析和内存占用。
- 在
connectedCallback中动态插入<link rel="stylesheet" href="style.css"> - 避免在每个组件实例中重复注入相同样式字符串
- 样式与逻辑分离，便于维护和复用
