在HTML中注入Angular组件Selector后如何修复CSS样式异常？

问题原因 #

你遇到的样式偏移是Angular组件的默认渲染机制导致的：当你使用元素形式的自定义组件选择器时，Angular会在DOM树中额外生成一层和选择器同名的标签节点，你原有的CSS是基于拆分前的DOM层级写的，多了这一层节点后，要么直接子级选择器（>）匹配失效，要么flex、grid这类依赖直接子级的布局规则作用错误，最终导致布局偏移。

解决方案 #

方案1：给拆分出的组件添加display: contents配置（改动最小） #

在拆分出的组件的@Component装饰器中添加host样式配置，让自定义组件标签不参与布局渲染，相当于直接把组件内部内容“透传”到父级DOM层级，原有CSS无需任何修改：

@Component({
  selector: 'app-your-extract-component',
  templateUrl: './your-extract-component.component.html',
  styleUrls: ['./your-extract-component.component.css'],
  // 新增下面这行配置
  host: {
    'style': 'display: contents'
  }
})
export class YourExtractComponent { }

方案2：调整原有CSS选择器适配新增DOM层 #

如果不想改动组件配置，直接修改原页面的CSS，给所有匹配原拆分代码的选择器加一层组件选择器即可，比如原选择器是.main-container > .content-section，修改为：

/* 多匹配一层你拆分出的组件标签 */
.main-container > app-your-extract-component > .content-section {
  /* 原有样式保持不变 */
}

方案3：用属性型选择器定义组件，避免新增DOM节点 #

把拆分出的组件的选择器改成属性形式，使用时直接挂载到原有的DOM节点上，不会额外生成标签层，原有DOM结构完全不变：

1. 修改组件的selector配置：

@Component({
  // 把原来的元素选择器改成属性选择器
  selector: '[appYourExtractComp]',
  // 其余配置不变
})

2. 调用组件时直接在原有DOM节点上加属性即可，无需新增标签：

<!-- 原来拆分前的节点，加个属性就相当于调用组件 -->
<div class="content-section" appYourExtractComp>
</div>

内容的提问来源于stack exchange，提问作者ab1004