Angular2 transclusion - apply css to child element class

Question

I have a control called dropdown which uses transclusion. Note the 'dropdown-content' class on the second line:

<div>
  <div *ngIf="dropdownVisible" class="dropdown-content">
    <ng-content select="dropdowncontent"></ng-content>
  </div>
</div>

I've built a second control which tries to use the first one:

<dropdown>
  <dropdowncontent>
     //some stuff here
  </dropdowncontent>
</dropdown>

I'm trying to use the styles annotation in the second control to apply a style to the dropdown-content class from the first control.

styles: [`
    .dropdown-content {
        border: green solid 5px;
    }
`]

However the style rule does not seem to be applied. I'm assuming my efforts are being thwarted by something to do with the shadow dom but I'm not sure.

Is there a way for the parent control to apply styles to the child control?

Once the controls have been rendered, the start of the html looks like this:

<dropdown _ngcontent-lgf-3="" _nghost-lgf-4="">
    <div _ngcontent-lgf-4="">
    <div _ngcontent-lgf-4="" class="dropdown-content">
            <dropdowncontent _ngcontent-lgf-3="">

Which shows that class "dropdown-content" is being produced in the final html.

Wilone

Gunter, how is this a duplicate? That question is about styling the ng-content tag, my question is about the parent styling the child elements produced by the ng-content tag. – Wilone

Answer 1

from the parent scss file you can go

:host /deep/ .child-css-class {
    some-scss
}

see here for reference

Mephistopheles