HostBinding不能直接绑定BEM类名，因其破坏“一个元素只挂一个block类”原则，导致语义断裂；正确做法是模板中显式声明block和element类，仅用HostBinding控制modifier类（如card--featured），避免字符串拼接与混用ngClass引发的覆盖风险。
HostBinding 为什么不能直接绑定 BEM 类名？
因为 @HostBinding('class') 绑定的是整个宿主元素的 class 属性，而 BEM 的 block 名（如 card）必须作为根元素的“唯一 block 标识”存在；如果用 @HostBinding('class') = 'card card--featured'，就破坏了 BEM “一个元素只挂一个 block 类”的原则，且后续动态添加 card__title 时语义断裂、难以维护。
正确写法：用 HostBinding 控制 modifier，BEM class 写在模板里
把 block 名和 element 名保留在 HTML 模板中，只用 @HostBinding 控制 modifier 类（即 --xxx 形式），这样既符合 BEM 规范，又让 Angular 的响应式控制聚焦在状态变化上：
<div class="card" [class.card--featured]="isFeatured">
<h3 class="card__title">{{ title }}</h3>
<div class="card__body"></div>
</div>
对应组件中：
@HostBinding('class.card--collapsed') get collapsed() {
return this.isCollapsed;
}
- 模板中显式声明
card和card__title，确保 BEM 语义完整 -
@HostBinding只接管 modifier，避免 class 字符串拼接 - 不推荐
@HostBinding('class') = this.bemClassString—— 容易漏掉 block 名、难 debug、破坏可读性
ngClass 和 HostBinding 混用时的冲突点
如果同时在模板里用 [ngClass] 和 @HostBinding('class.xxx')，Angular 会合并 class 列表，但顺序不可控，可能导致 modifier 被覆盖或权重异常：
立即学习“前端免费学习笔记（深入）”；
- 例如
[ngClass]="{ 'card--disabled': disabled }"+@HostBinding('class.card--loading')→ 最终 class 可能是card card--disabled card--loading，但无法保证 CSS 规则生效顺序 - 更危险的是：
ngClass动态删类时，@HostBinding绑定的类可能被意外清除（Angular 14+ 已修复多数情况，但仍建议避免混用） - 统一策略：状态类全走
@HostBinding，组合类（如多个 modifier 同时存在）改用[ngClass]或[class]绑定
BEM 类名在 ViewEncapsulation.Emulated 下仍被覆盖？检查这三点
即使用了 @HostBinding 和规范 BEM，样式仍被外部穿透，常见原因不是类名写错，而是封装机制被绕过：
- 误设
encapsulation: ViewEncapsulation.None—— 直接关闭封装，所有类都变全局 - 第三方库全局 CSS（如
styles.css中 import 的 antd 或 bootstrap）含宽泛选择器，比如div[class*="card"] { ... } - 用了
::ng-deep（已弃用）或未加属性标记的:host ::ng-deep .card__title，实际编译后变成无作用域限制的选择器
DevTools 里看 Styles 面板，带 [_ngcontent-xxx] 的规则才是组件内有效样式；没带的，就是穿透进来的外部规则 —— 这才是真实作用域边界。
