ViewEncapsulation.Emulated 默认通过添加 _nghost-xxx 和 _ngcontent-xxx 属性并重写 CSS 选择器（如 .button[_ngcontent-xxx]）实现样式隔离，仅防外泄不阻外侵。

Angular 默认就封装组件样式，不需要额外配置；但如果你遇到样式泄漏、被覆盖或意外穿透等问题，问题大概率出在 ViewEncapsulation 模式选错，或者没意识到它在底层干了什么。

ViewEncapsulation.Emulated 是怎么隔离样式的？

这是 Angular 的默认行为，不依赖浏览器 Shadow DOM，而是靠编译时“打标记”实现隔离：

• Angular 会为组件宿主元素加一个 _nghost-xxx 属性，为模板内所有子元素加 _ngcontent-xxx 属性（xxx 是哈希 ID）
• 你写的 .button { color: red; } 会被重写成 .button[_ngcontent-xxx] { color: red; }
• 最终 CSS 只匹配带该属性的元素，天然限制作用域

常见错误现象：以为写了局部样式就绝对安全，结果发现全局 button { padding: 8px; } 还是生效了——这是因为 Emulated 不阻止外部样式穿透进来，只防止自己漏出去。

ViewEncapsulation.None 为什么容易引发样式污染？

设成 ViewEncapsulation.None 后，Angular 完全放弃样式处理，直接把你的 styles 或 styleUrls 插入到 中作为全局 CSS：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• .header { font-size: 24px; } 会匹配页面中任意 <div class="header">，不管它在哪个组件里 <li>多个组件都设 <code>None，彼此样式可能互相覆盖，调试时很难定位来源
• 尤其在微前端或模块懒加载场景下，后加载的 None 样式会覆盖先加载的

典型误用场景：想“快速覆盖第三方库样式”，直接在某个组件里设 None + 大量 !important ——短期见效，长期维护成本飙升。

ViewEncapsulation.ShadowDom 真正隔离但有硬性限制

启用 ViewEncapsulation.ShadowDom 后，Angular 会调用浏览器原生 attachShadow()，把组件内容放进一个独立的 #shadow-root：

• 组件内样式完全不出去，外部全局样式也进不来（继承属性如 color、font-family 除外）
• 必须确保目标浏览器支持 Shadow DOM v1（Chrome 53+、Firefox 63+、Safari 10.1+、Edge 79+）
• 服务端渲染（SSR）下无法使用，因为 Node.js 环境无 DOM API；若用 Angular Universal，该模式组件在首屏会回退为 Emulated
• 不能用 ::ng-deep 穿透，得改用 :host、::slotted() 或 CSS 自定义属性配合

实际项目中，除非你明确需要 Web Components 级别的强隔离（比如向非 Angular 系统提供可嵌入组件），否则没必要主动切过去。

真正容易被忽略的是：即使你没显式设置 encapsulation，只要组件没声明任何 styles 或 styleUrls，Angular 也会悄悄把它降级为 ViewEncapsulation.None ——这意味着空样式块的组件，其实毫无样式隔离能力。