CSS Angular2- How to apply css to nested element inside one component?

Question

I have one angular component with the html as following:

<!-- dynamic content generated runtime -->
<div class="test">
      <div class="testinside">
        HELLO
      </div>
    </div>

Now I want to style for one class in the part of [dynamic content generated], so my scss as following:

:host {

  display: inline-block;
  vertical-align: middle;

  > .test > .testinside {
    color: red;
  }

  > select {
    display: inline;
  }

  > .combobox-container > .input-group {
    color: red;
  }
}

[.combobox-container > .input-group] is the css setting for the dynamic content.

However, it seems that the css for dynamic content is not effected :( (the css for static content is OK)

The dynamic content is as following:

<common-combobox _ngcontent-hdj-67="" ...>
<!-- dynamic content generated runtime -->
  <div class="combobox-container combobox-selected"> 
    <input type="hidden" name="" value="2"> 
    <div class="input-group"> 
        <input type="text" autocomplete="off" placeholder="Anrede" class="combobox"> 
        <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span> 
    </div> 
  </div>

  <div _ngcontent-hdj-35="" class="test">
    <div _ngcontent-hdj-35="" class="testinside">
      HELLO
    </div>
  </div>
</common-combobox>

Can anyone help me to show the points I missed?

I'm using one UI lib from github.com/danielfarrell/bootstrap-combobox — doannx
– doannx, Commented Feb 10, 2017 at 8:37

Manh Le · Accepted Answer · 2017-08-23 16:30:29Z

8

Use :host /deep/ to force child component use style

https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-

Here is Live example from Angular, see hero-detail.component.css

Update from @Joseph Briggs

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

In short, ::ng-deep will replace :host /deep/until next notification from Angular.

edited Aug 23, 2017 at 16:30

answered Feb 10, 2017 at 8:17

Manh Le

1,65016 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rip3rs Over a year ago

An update:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Cedric Reichenbach Over a year ago

As far as I understand that deprecation message, ::ng-deep will be removed as well, and there will be no replacement.

Burnee Over a year ago

I'm pretty sure there's gonna be a replacement. Otherwise what do you do if you have a page component that want to show a 3rd party calendar component with a little different styling than the style you want to you use on all other calendars on other pages? related: github.com/angular/angular/issues/17867

Suren Srapyan · Accepted Answer · 2017-02-10 08:10:04Z

-1

Set the viewEncapsulation for that component to None.

answered Feb 10, 2017 at 8:10

Suren Srapyan

68.9k14 gold badges127 silver badges119 bronze badges

2 Comments

doannx Over a year ago

Thanks @Suren, but ViewEncapsulation.None violates our coding rule in project :(

Burnee Over a year ago

Although it solves the mentioned problem, it has side effects that you probably don't want.

Collectives™ on Stack Overflow

CSS Angular2- How to apply css to nested element inside one component?

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related