scss内部的阴影穿透

Question

我使用阴影穿孔css作为我的风格之一。但是我在scss里面有颜色代码，我想在样式上使用它。在scss文件中有可能穿透阴影吗？

@Component({
selector: 'my-selector',
styles: [
    require('./my.style.scss'),
    ':host >>> .mystyle { background-color: green }'
],
templateUrl: './my.template.html'
})

Answer 1

尽管>>>和/deep/应该是等价的，但我发现用/deep/替换>>>运算符在使用.scss文件时是有效的。

Answer 2

浏览器中本机支持/deep/作为阴影DOM穿透后代组合器，但实际上是不推荐的(并在Chrome 63中删除)。

但是，由于Angular提供(并默认为)一个模拟的影子DOM实现(它不使用本机影子DOM实现)，它对/deep/的使用与本机浏览器的使用无关--它自己的实现重载，而不是在最终的css中输出。因此，在模拟阴影DOM样式封装(encapsulation: ViewEncapsulation.Emulated)中使用encapsulation: ViewEncapsulation.Emulated仍然适用于所有浏览器。

但是，由于其想法是转移到本机封装(从模拟)，在它自己的仿真实现中，角不推荐/deep/ (虽然它仍然工作，技术上总是可以)。