如何使用主机上下文在Angular 2中设置嵌套组件的样式？

Question

我有一个组件A，我在组件A中使用组件B（它使用C＆amp; D组件）。我在一个名为a.scss的文件中有A的样式，如下所示：

:host {
    width: 100%;
    position: absolute;

    .container-area {
        height: calc(100% - 30px);

        .col-area {
            display: flex;
            height: 100%;
        }

        .nested-area {
            width: 100%;

            B {
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;

                C {
                    .container-c {
                        width: 100%;
                        height: 100%;
                    }
                }

                D {
                    border-color: red;
                    border-style: solid;
                }
            }
        }
    }

现在，样式部分地应用于组件A和其余组件。我可以通过在/deep/旁边添加:host来解决这个问题。

由于/deep/目前已被弃用，我想知道使用:host-context实现相同目标。但我不知道该怎么做。任何人都可以帮我这个吗？

另外，如何在不同的.scss文件中覆盖特定的类.container-area？我无法覆盖同一个类，因为当我检查样式时，.container-area看起来像[nghost-c01] .container-area[_ngcontent-c01]

谢谢。