Angular中ViewEncapsulation.ShadowDom与Emulated模式的差异对比

两种模式都用于实现组件样式隔离，核心差异来自实现逻辑的本质不同，具体区别可以从几个维度梳理：

核心实现原理 #

• ViewEncapsulation.Emulated（Angular 默认启用的模式）
  不依赖浏览器原生特性，完全由Angular编译流程模拟隔离效果：编译时Angular会给每个组件的宿主元素、模板内所有DOM元素添加唯一的随机自定义属性（形如_nghost-xxxxxx、_ngcontent-xxxxxx），同时自动给组件定义的所有样式选择器追加对应的属性选择器后缀，通过选择器匹配范围限制实现样式不向外泄露。
  比如你在组件样式里写的.title { font-size: 16px; }，编译后会被改写为.title[_ngcontent-abc123] { font-size: 16px; }，只会匹配当前组件内带对应标识的元素。
• ViewEncapsulation.ShadowDom
  直接调用浏览器原生Shadow DOM v1 API，在组件宿主元素上创建独立的Shadow Root，组件的全部模板结构、样式都会被挂载到这个独立的Shadow DOM树内部，所有隔离逻辑完全由浏览器原生能力实现，Angular不会额外修改DOM属性或样式选择器。

隔离能力差异 #

• 样式隔离强度
  Emulated 模式 仅能实现组件内部样式不泄露到组件外，外部全局定义的样式仍然可以影响组件内部元素——本质上组件DOM还是处于主文档DOM树中，只要全局选择器优先级足够，就能覆盖组件内部样式。
  ShadowDom 模式 是原生强隔离：组件内部样式完全不会泄露到外部DOM，外部全局样式默认也无法穿透Shadow边界影响内部元素，只有CSS自定义属性（CSS变量）、::part、::slotted这类原生设计用于跨Shadow边界通信的接口能实现有限的样式跨域控制。
• DOM 访问隔离
  Emulated 模式 不存在DOM层面的隔离，外部代码通过document.querySelector()这类常规DOM API可以直接选中组件内部的任意元素，和操作普通DOM节点没有区别。
  ShadowDom 模式 自带原生DOM隔离，外部常规DOM查询API无法穿透Shadow Root边界获取内部元素，必须先获取组件宿主元素的shadowRoot实例，再在Shadow树内部执行查询才能拿到对应节点，和标准Web Components的行为完全一致。

兼容性与适用场景 #

• ViewEncapsulation.Emulated
  兼容性覆盖所有Angular支持的浏览器，行为完全由Angular统一管控，不存在跨浏览器实现差异，是普通Angular业务开发的首选，绝大多数项目不需要修改默认的封装模式。
  注意这个模式下Angular提供的::ng-deep样式穿透选择器可以生效，本质是Angular编译时识别到该选择器后不会追加属性限制，让样式可以匹配到子组件节点。
• ViewEncapsulation.ShadowDom
  依赖浏览器原生Shadow DOM能力，仅能在支持Shadow DOM v1的现代浏览器中运行，Angular不会做特性兼容抹平，老旧浏览器（如IE11、低版本移动端浏览器）无法正常使用。
  适合用于开发跨框架复用的标准Web Components、嵌入第三方站点的插件/微前端子应用、需要严格隔离避免外部样式/DOM逻辑干扰的场景。这个模式下::ng-deep完全无效，因为原生Shadow DOM本身不支持任意样式穿透。

内容的提问来源于stack exchange，提问作者Lorraine Ram-El