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

Question

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

这是我的 HTML:

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

这是我的 CSS:

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

.video-container 是里面的一个 HTML 元素。我想在父页面加载时设置视频容器的高度。这曾经在 Angular2 RC 4 和 5 中工作。今天在安装 Angular2 最终版本后停止工作。

有没有更合适的处理方式？

Answer 1

我想你在这里找的是/deep/。它通过 child 个组件向下应用样式。在你的 parent 风格中你会拥有。

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

Answer 2

:host 仍受支持。 ::shadow 不受支持。据我所知从来没有。 ::content 被忽略。 /deep/ 和 >>> 是等效的，并且仍然受支持。

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

应该做你想做的。

另见

Answer 3

谢谢 Gunter 和 Clint。根据您的建议，这是我解决这个问题的方法（使用 LESS 生成 CSS）：

@deep:  ~">>>";

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

@{deep} 直接位于 :host 下会影响所有子节点，但将它放在子元素内只会影响该子节点内的样式 (stm-video)。

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

Angular2 final release no longer supports :host ::shadow

css

web-component

angular2-directives

angular2-template

angular