共计 974 个字符，预计需要花费 3 分钟才能阅读完成。
在本周的项目中有一个需求，对处于两种不同状态的计算机列表赋予不同的颜色方便更加醒目的区分，完工后的效果如下。
解决思路——rowClassName
项目使用了 ng-alain, 作者提供了许多方便的方法与属性，所以解决这个问题并不太难，张喜锁学长直接给我说了使用 rowClassName 这个属性。0
开始的时候我以为这个类名是对象那个类，还在思考应该怎么写，后来听张喜硕学长一说才明白，这是 css 的那个类，那就简单了。
再写出相应的判断方法
/**
* @Description: 设置行背景
* 返回 class 名
*/
public setRowColor(record: Host, index: number) {
if (record.status === 1) {
return ‘greenRow’;
}
}
css
.greenRow {
background-color: #52c41a;
}
大功告成，查看测试效果——没有效果……
怎么回事？难道思路是错的？打开开发者工具，class 已经附上了，但是却没有相应的 css
失败的原因
我猜测产生上面这种现象的原因是，是因为组件的样式进行了封装，而这种给他 css 的方式时，它没有引用相应的 css 的文件
如果猜测有误，请指出，不胜感激。
关于封装
封装模式有三种，分别是：
Native 原先浏览器 Shadow DOM 行为。
Emulated 仿真模式，通过 Angular 来模拟类似 Shadow DOM 的行为。
None 无任何封装行为。
想更加深入的了解，可以看这篇文章。
解决办法
难道我们没有办法侵犯第三方组件了吗？好在 Angular 提供了一种对未来工具更好兼容性的命令 ::ng-deep 来强制样式允许侵入子组件。
css 修改如下：
::ng-deep .greenRow {
background-color: #52c41a;
}
成功了（写到这里不得不提一句，实际上要完成需求根本不需要这样麻烦，ng-alain 内部已经提供了颜色的样式, 直接使用即可。）
Shadow DOM
angualr 的实际上是 Shdow Dom.Shadow DOM 它允许在文档（document）渲染时插入一棵 DOM 元素子树，但是这棵子树不在主 DOM 树中。
因此开发者可利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。
关于 Shadow DOM 的具体部分可以看这篇文章神奇的 Shadow DOM
