scss内部的阴影刺穿答案

【问题标题】：Shadow piercing inside scssscss内部的阴影刺穿
【发布时间】：2018-09-15 17:08:02
【问题描述】：

我正在为我的一种样式使用阴影穿透 css。但是我在 scss 中有我想在样式中使用的颜色代码。是否可以在 scss 文件中插入阴影？

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

【问题讨论】：

请注意 /deep/ 和 >>> 在 Angular 4.3.0 中被删除，而改用 ::ng-deep

标签： angular sass

【解决方案1】：

在 SASS 中不支持 AFAIK >>>，因为这个组合器没有进入 CSS 标准。 Angular 有自己的实现来模拟它的支持。

AFAIR 仅使用空格而不是 >>> 在 Angular2 中与 ViewEncapsulation.Emulated （默认）具有相同的效果。

使用空格似乎不再等同于>>> 和/deep/。

Plunker example

/deep/ 等价于 Angular 中的 >>>，但只有 /deep/ 可以与 SASS 配合使用。

更新

SASS 弃用了 >>> 并引入了 ::ng-deep 以获得特殊的 Angular 支持（因此名称中包含 ng-）。
最近的 Angular 4 版本已经支持 ::ng-deep 并且还弃用了 >>>。

在文档中提到::ng-deep 也已被弃用，但这是出于不同的原因。当所有浏览器都支持具有适当主题的 shadow DOM 时，ViewEncapsulation.Emulated（默认）将被删除，Native 将成为默认值，::ng-deep 将被废弃。

更新 2

::slotted 现在被所有新浏览器支持，可以与 `ViewEncapsulation.ShadowDom 一起使用

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

【讨论】：

请注意，根据stackoverflow.com/help/licensing 和网站页脚，所有用户贡献均在 cc by-sa 3.0 下获得许可，并需要署名。您应该归因 Christian 的答案，因为您在 10 月 7 日的编辑中使用了它。 (meta discussion)
信息本身并非来自他的回答，而是来自 Angular2 团队成员在 GitHub 问题上的 cmets。尽管添加此信息可能有用，但他的回答给出了暗示。
好的，我可以看到你来自哪里。随意在有关这两个答案的链接元讨论中权衡。
@GünterZöchbauer 说得对，这些特定信息可在各种论坛中找到。我的担忧与我只是不希望我的答案看起来像我抄袭 Günter 的答案这一事实有关。

【解决方案2】：

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

【讨论】：

【解决方案3】：

/deep/ 在浏览器中被原生支持为影子 DOM 穿透后代组合器，但确实已被弃用（并在 Chrome 63 中被移除）。

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

但是，因为这个想法是转移到本机封装（从模拟），Angular 在它自己的模拟实现中弃用了/deep/（尽管它仍然有效，并且在技术上总是可以）。

【讨论】：