html - 无法合并 :host-context with a :host/deep/tag?

Question

我正在尝试使用 angular 2 构建一个双主题应用程序。有问题的组件 css 已经使用 :host/deep/强制对子组件进行样式设置。

但是我正在尝试根据 html 主题切换此样式，并且我正在使用 :host-context。

我发现，当我尝试将 :host-context 嵌套在 :host/deep/标记中时，不会呈现来自 :host-context 的更改。

例如

:host /deep/ .box {
    :host-context(.blueTheme) & {
        background-color: blue
    }
}

关于为什么这不起作用的任何想法？

Answer 1

更新

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

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

原创

/deep/ 已弃用。 ::ng-deep 是新事物。

我猜你想要的是

:host-context(.blueTheme) /deep/ .box {
  background-color: blue
}