Css Angular2最终版本不再支持：host:：shadow

今天早上，我升级到Angular2最终版本，并注意到我在以前的候选版本中使用的CSS样式不再有效。我需要控制HTML元素在父组件的子组件中的外观

这是我的HTML：

   <div id="intro">
        <stm-video [video]="PageData.WelcomeVideo"></stm-video>
    </div>

.video容器是其中的HTML元素。我想设置视频容器加载到父页面时的高度。这在Angular2 RC 4和5中使用。安装Angular2最终版本后，今天停止工作

---

有没有更合适的方法来处理这个问题？

我想你要找的是

/deep/

。它通过子组件向下应用样式。在您的父样式中，您将拥有

/deep/ .video-container 
{
    height: 80vh;
    width: inherit;
}

---

：仍然支持主机

。

：：不支持阴影

。据我所知，从来没有。

：：忽略内容

。

/deep/

和

>

是等效的，它们仍然受支持

:host >>> {
  stm-video {
    ...

你应该做你想做的

---

另请参见

谢谢冈特和克林特。根据您的建议，以下是我解决此问题的方法（使用较少的代码生成CSS）：

---

将@{deep}直接放在：host下会影响所有子节点，但将其放在子元素中只会影响该子节点（stm视频）中的样式。

Angular2最终版本是否不再支持：host/深度/似乎用较少的时间不起作用though@TomSchreck主持人还应该工作。您可能需要使用

：host/deep/

，但根据您的帖子的措辞，我不确定元素结构。是否从css中删除了

/deep/

？

:host >>> {
  stm-video {
    ...

@deep:  ~">>>";

:host
{
    stm-video
    {
        @{deep} 
        {
            .video-container 
            {
                height: 80vh;
                width: inherit;
            }
        }
    }
}