Tom Schreck Tom Schreck - 2 months ago 14
CSS Question

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?

Answer

: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.

See also Custom Styling on <ng-content> in angular2 not working ?