angular默认viewencapsulation.emulated通过属性选择器实现样式隔离，第三方组件内部样式无法被直接覆盖；::ng-deep已弃用；推荐使用全局styles.css配合命名空间定制第三方组件样式。
ViewEncapsulation.Emulated 会让 CSS 只作用于组件内部元素
Angular 默认用 ViewEncapsulation.Emulated，它不靠浏览器原生 Shadow DOM，而是给组件的 HTML 元素自动加一个属性（比如 _ngcontent-c123），再把你的样式规则重写成带这个属性的选择器。例如你写 .card__title { color: blue; }，最终生成的是 .card__title[_ngcontent-c123] { color: blue; }。
这意味着：只有当前组件模板里直接写的元素（且没被子组件封装隔开）才能匹配上——第三方组件如 <p-dropdown></p-dropdown> 内部的 .p-dropdown-trigger 就完全不会被选中。
- 它不是“样式没加载”，而是“选择器根本没命中”
- DevTools 的 Styles 面板里，带
[_ngcontent-xxx]的规则才是组件内生效的；没带的，是全局或穿透进来的 - 即使你用了 BEM 命名（如
.card__title），只要没出现在当前组件模板里，照样无效
::ng-deep 是临时穿透方案，但已被 Angular 标记为 deprecated
::ng-deep 会强制让某条样式规则跳过封装限制，向下穿透到子组件内部。比如在组件样式里写：
.my-dropdown ::ng-deep .p-dropdown-trigger {
background: #4a5568;
}
它确实能生效，但问题明显：
- Angular 官方已明确弃用，未来版本可能直接移除支持
- 它破坏了封装边界，容易引发不可预期的样式污染（尤其多人协作时）
- Webpack 或构建工具可能报 warning，CI 流程里容易卡住
- 无法和 SCSS 的嵌套、mixin 等特性自然配合，维护成本高
全局样式（styles.css）才是 PrimeNG 等第三方组件定制的推荐路径
所有通过 angular.json 中 "styles" 数组引入的文件（如 src/styles.scss），都不受任何 ViewEncapsulation 影响，天然全局作用域。
你可以直接写：
.p-sidebar {
width: 280px !important;
}
.p-button:focus {
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
- 不用改组件的
encapsulation设置，不破坏封装契约 - 支持 SCSS 变量、
@import、@mixin，适合主题化管理 - 务必加命名空间前缀（如
.myapp-p-sidebar）避免和未来升级的 PrimeNG 默认样式冲突 - 如果项目用了 Tailwind，也建议把自定义覆盖逻辑统一收口到这里，而非分散在各组件
ViewEncapsulation.None 不是“万能开关”，慎用
设 encapsulation: ViewEncapsulation.None 后，组件样式会变成纯全局 CSS，不再加 [_ngcontent-xxx] 属性，看起来“啥都能改”。但实际风险不小：
- 该组件里所有样式都会泄漏出去，可能意外覆盖其他组件的
.btn、.modal等通用类 - 如果组件被复用多次，样式只会注入一次，但 DOM 实例有多个，容易出现权重混乱或未定义行为
- 和
ViewEncapsulation.Emulated混用时，调试难度陡增：你永远不确定某条样式到底是从哪一层漏出来的 - 团队协作中，这类设置极易被忽略，成为“幽灵 bug”的温床
真正需要它的场景极少，比如极简弹窗组件必须强制撑满全屏、且确定不会被复用——否则优先走全局样式 + 命名空间方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
