如何让Angular应用免受WordPress外部CSS影响且保留头尾样式？

方案1：利用Angular的Shadow DOM隔离样式 #

Angular自带的ViewEncapsulation可以实现组件样式的完全隔离，外部CSS无法穿透到组件内部。在你的Angular根组件（比如AppComponent）里添加如下配置：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom // 开启Shadow DOM隔离
})
export class AppComponent { }

开启后，Angular组件会被包裹在Shadow DOM中，WordPress的全局CSS完全影响不到内部的Material组件和布局，同时页眉、页脚依然能正常加载WordPress的样式。

方案2：给Angular容器加专属类，限制WordPress CSS作用范围 #

1. 在WordPress页面模板中，给嵌入Angular的根容器添加唯一类名：

<div class="angular-app-container">
  <app-root></app-root>
</div>

2. 修改WordPress的style.css，给所有全局样式加上:not(.angular-app-container)前缀，比如原来的：

body {
  margin: 0;
  font-family: Arial;
}

改成：

body:not(.angular-app-container) {
  margin: 0;
  font-family: Arial;
}

如果WordPress样式较多，可借助Sass/LESS的嵌套语法批量处理：

:not(.angular-app-container) {
  // 嵌套所有原WordPress全局样式
  body { ... }
  p { ... }
  // 其他样式规则
}

这样WordPress样式只会作用在页眉、页脚等非Angular区域，不会渗透到Angular容器内部。

方案3：在Angular根组件中添加样式重置层 #

在Angular根组件的CSS文件中，先重置容器内所有元素的样式，清除外部CSS的影响，再补充基础样式：

.angular-app-container * {
  all: unset; // 重置所有样式属性
  box-sizing: border-box; // 保留盒模型避免布局混乱
}

// 重新定义Angular需要的基础样式示例
.angular-app-container h1 {
  font-size: 2rem;
  font-weight: bold;
}

这个方案无需修改WordPress代码，缺点是需要手动补全部分基础样式，避免Angular内容样式过于简陋，不过Material组件的自带样式会自动覆盖重置规则，不用担心组件样式失效。

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