Angular：TypeScript动态创建元素无法应用组件样式的原因

核心原因：Angular的样式封装机制 #

Angular默认启用ViewEncapsulation.Emulated样式封装，会给组件模板内的所有元素自动添加一个类似[_ngcontent-xxx]的专属属性，同时将组件SCSS中的样式编译为带该属性的选择器（比如.colorBox[_ngcontent-abc123]）。

你通过原生JSdocument.createElement动态创建的div元素，不会自动带上这个Angular生成的封装属性，导致组件SCSS里的样式无法匹配到这些动态元素。而全局style.scss中的样式不会被添加封装属性，是全局生效的，所以能正常作用于所有.colorBox元素。

解决方法 #

1. 关闭组件样式封装 #

在组件装饰器中设置encapsulation: ViewEncapsulation.None，这样组件SCSS的样式会变为全局样式，不再受封装限制。但要注意避免样式污染其他组件。

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

@Component({
  selector: 'app-your-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class Component implements OnInit {
  bgAnimation!: any;
  numberOfColorBoxes = 400;

  ngOnInit(): void {
    this.bgAnimation = document.getElementById('bgAnimation');
    for (let i = 0; i < this.numberOfColorBoxes; i++) {
      const colorBox = document.createElement('div');
      colorBox.classList.add('colorBox');
      this.bgAnimation.appendChild(colorBox);
    }
  }
}

2. 使用::ng-deep穿透样式封装 #

在组件SCSS中用::ng-deep前缀打破封装，让样式作用到组件内部所有匹配的元素（包括动态创建的）。

:host ::ng-deep .colorBox {
 z-index: 2;
 filter: brightness(1.1);
 transition: 2s ease;
 position: relative;
 margin: 2px;
 background: #1d1d1d;
}

注：::ng-deep属于非标准特性，未来可能被废弃，但目前仍是Angular项目中常用的穿透方案。

3. 手动添加封装属性（不推荐） #

获取组件根元素的封装属性，手动给动态创建的元素添加该属性。这种方法依赖Angular内部生成的属性名，存在维护风险，不建议使用。

ngOnInit(): void {
  this.bgAnimation = document.getElementById('bgAnimation');
  // 获取组件的封装属性
  const encapsulationAttr = this.bgAnimation.attributes
    .namedItem('_ngcontent-' + document.querySelector('app-your-component')?.getAttribute('_nghost')?.split('-')[1]);
  
  for (let i = 0; i < this.numberOfColorBoxes; i++) {
    const colorBox = document.createElement('div');
    colorBox.classList.add('colorBox');
    if (encapsulationAttr) {
      colorBox.setAttribute(encapsulationAttr.name, encapsulationAttr.value);
    }
    this.bgAnimation.appendChild(colorBox);
  }
}

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