css angular web-component angular2-template angular2-directives

Angular2 final release no longer supports :host ::shadow

I upgraded to Angular2 final release this morning and noticed that the CSS styles I was using in previous release candidates are no longer working. I need to control the look a HTML element wihtin a child component from the parent.

Here's my HTML:

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

Here's my CSS:

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

.video-container is a HTML element inside . I want to set the height of video-container when it's loaded in parent page. This used to work in Angular2 RC 4 and 5. Stopped working today after installing Angular2 final release.

Is there a more appropriate way to handle this?

Solution

:host is still supported. ::shadow is not supported. As far as I know it never was. ::content is ignored. /deep/ and >>> are equivalent and are both still supported.

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

should do what you want.