Angular 14中动态创建元素添加CSS类不生效问题排查

我在Angular 14.1.0项目的TypeScript文件中，通过以下代码动态创建div元素并添加participant-name类：

const text = document.createElement('div');
text.classList.add('participant-name');

对应的CSS文件中已定义该类的样式：

.participant-name {
  some attributes...
}

但运行后发现这个元素无法加载对应的CSS样式，且确认没有其他样式覆盖该类。附浏览器开发者工具截图：

内容的提问来源于stack exchange，提问作者İ. Burak Tanrıkulu