Angular2 final release no longer supports :host ::shadow

Question

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?

score 2 · Answer 1 · answered Sep 16 '16 at 14:14

Thank you Gunter and Clint. With your suggestions, here is what I arrived at for solving this problem (using LESS to generate CSS):

@deep:  ~">>>";

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

having @{deep} directly under :host affects all child nodes, but putting it inside the child element just affects the styles within that child node (stm-video).

score 1 · Answer 2 · answered Sep 16 '16 at 02:53

1

I think what you are looking for here is /deep/. It applies the styles down through child components. In your parent styles you would have.

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

answered Sep 16 '16 at 02:53

Clint

2,696
23
42

1

is :host no longer supported with Angular2 final release? /deep/ doesnt seem to work with LESS though – Tom Schreck Sep 16 '16 at 04:09
1

@TomSchreck Host should still work. You may need to use `:host /deep/` instead, I wasn't sure of the element structure by the wording of your post. Is `/deep/` removed from the css? – Clint Sep 16 '16 at 04:35

score 1 · Accepted Answer · edited May 23 '17 at 11:54

1

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

edited May 23 '17 at 11:54

Community

1
1

answered Sep 16 '16 at 04:54

Günter Zöchbauer

623,577
216
2,003
1,567

Angular2 final release no longer supports :host ::shadow

3 Answers3