Tom Schreck Tom Schreck - 1 year ago 58
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>

Here's my CSS:

:host ::shadow
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 Source

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