angular默认使用viewencapsulation.emulated模式，通过添加唯一属性选择器实现样式隔离；可选viewencapsulation.shadowdom（原生shadow dom，完全隔离但兼容性受限）或viewencapsulation.none（全局样式，易污染）；修改需谨慎，影响样式作用域、测试及第三方组件集成。
Angular 默认用 ViewEncapsulation.Emulated，但你确实可以改——关键是改对地方、改得安全，否则容易引发样式泄漏或第三方组件失效。
怎么在单个组件里切换封装模式
直接在 @Component 装饰器里加 encapsulation 配置就行，值必须是 ViewEncapsulation 枚举成员：
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-card',
template: `<div class="card"><ng-content></ng-content></div>`,
styles: [`.card { border: 1px solid #ccc; }`],
encapsulation: ViewEncapsulation.None // ← 就这行
})
export class CardComponent {}
-
ViewEncapsulation.Emulated：默认，安全，推荐大多数场景 -
ViewEncapsulation.ShadowDom：真 Shadow DOM，样式完全隔离，但 IE/旧版 Safari 不支持，且部分 Angular 功能（如::ng-deep）会失效 -
ViewEncapsulation.None：样式全局注入，.card会污染所有同名类——仅适合基础 UI 组件库或覆盖第三方样式时临时用
为什么不能全局统一设成 None
有人想在 main.ts 里用 defaultEncapsulation 一键切全局，比如：
platformBrowserDynamic().bootstrapModule(AppModule, {
defaultEncapsulation: ViewEncapsulation.None
});
这会导致所有组件样式失去边界，后果包括：
- 第三方组件（如
ng-zorro-antd或@angular/material）的内部样式可能被你的.button覆盖 - 多个组件共用
.header类时，样式优先级混乱，调试成本陡增 - 构建产物里 CSS 不再按组件拆分，无法利用懒加载按需注入样式
:host 和 ::ng-deep 在不同模式下的行为差异
这两个伪选择器不是“万能穿透工具”，它们的表现高度依赖当前封装模式：
-
:host始终指向组件宿主元素（即<app-card></app-card>），在Emulated和ShadowDom下都有效；但在None模式下它退化为普通类选择器，无特殊意义 -
::ng-deep只在Emulated模式下起作用（强制穿透子组件样式边界），在ShadowDom中被浏览器原生机制拦截，直接无效；Angular 官方已标记为 deprecated，不建议新项目使用 - 真正需要穿透时，优先考虑
ViewEncapsulation.None+ 显式类命名，或通过@Input()控制子组件样式类
容易被忽略的兼容性坑
切换模式后最常踩的不是逻辑错误，而是环境/构建链路问题：
-
ShadowDom模式下，document.querySelector('.some-class')查不到 Shadow DOM 内部元素，必须用host.shadowRoot?.querySelector(...) - CSS 自定义属性（
--my-color）在Emulated下能继承，在ShadowDom下需显式透传，否则子组件拿不到 - Karma/Jest 测试中，
DebugElement查询行为在不同模式下不一致：Emulated可查带_ngcontent-xxx属性的节点，ShadowDom需用shadowRoot访问
改封装模式不是开关按钮，它牵动的是样式作用域、测试方式、甚至第三方库集成方式——动之前先确认你真的需要它，而不是在解决一个本可由更细粒度类名或 BEM 命名规避的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
