ViewEncapsulation not working on nested components with ng-content

[fxck]

I'm not actually sure what is causing the problem, but I have two components

• list-cmp
  • list-item-cmp

both have only ng-content inside them, and I'm using it like this

    <list-cmp>
      <list-item-cmp>
        <a href="">whatever</a>
      </list-item-cmp>
    </list-cmp>

when I try to style the anchor with styles on list-item-cmp, it doesn't work

http://plnkr.co/edit/tdIIXsb2QA7oAlJIFXg1?p=preview

is it a bug, is it by design?

[thomashilzendegen]

AFAIK the style compiler flags all element selectors with the current component variable to ensure that no outside element is affected by the component's style. The problem here is, that ngContent is using your HTML as is and no additional attribute would be added to those elements (to match to the generated CSS).

But as you are already somehow "scoping" your CSS by yourself you could switch your component to view encapsulation mode "None" (encapsulation: ViewEncapsulation.None) to skip the shimming of the CSS.

[zoechi]

With this selector :host::content a { the link becomes green. I expected ::content alone to work but AFAIR there is the same issue in shimmed shadow DOM in Polymer.
It also works with encapsulation: ViewEncapsulation.None

[thomashilzendegen]

Ah, nice! This is a good catch with ":host::content" but ":host" is enough. This scopes the "a" and the shim does not trigger for it, as it is already scoped.

[rvalimaki]

I'm quite sure this was already working on ie. RC.4 (and also in all older versions we did actually use), but broken in RC.6.

I did make a quick Plunker about the situation and my problem:

https://plnkr.co/edit/R3agaCYIVWK6UnscMEwA?p=preview

I also tried the :host::content syntax suggested by @zoechi , but as you can see from the Plunker, it doesn't change a thing.

This is a new regression, since our code worked perfectly regarding this in RC.4, but no more in RC.6 (finished the RC.4 -> RC.6 update last Friday).

I can overcome the situation using ViewEncapsulation.None, but I really, really do not want to do that, since that would also affect siblings and parents, which is AFAIK the specific reason why to use some view encapsulation in the first place.

[rvalimaki]

Okay, as tested, this original issue #7400 was invalid when it was created (3rd March), but now the issue is real for RC.6 and RC.7, probably also for RC.5, but I haven't tested it. In RC.4 and older this worked., but is not working anymore.

This is a modified plunker from the original post, with ":host" added, and as you can see, it did work perfectly (beta.7):
http://plnkr.co/edit/UNSjGDYB04S3lpWScKgf?p=preview

I can also assure you that it did work for RC.4 as well.

However, as you can see from my recent plunker (RC.6), this is not working anymore:
https://plnkr.co/edit/R3agaCYIVWK6UnscMEwA?p=preview

Should I open a new bug report on this (since this is a new regression / new feature change), or is anyone anywhere inside Angular2 team going to even see this comment here, and acknowledge the possibly nasty bug (or even nastier feature change...)?

[vicb]

Saw it. If think this is the correct behavior. Let me double check and explain when I'm at work in a bit

[vicb]

With shadow DOM projected content keep the style at their original location.

Works as expected.

[rvalimaki]

@vicb Thanks for your quick response, and sorry to hear that.

While this might be the correct way according to shadow DOM emulation, this limits the usefulness of the (and ), since direct children for component works now differently than indirect children.

To overcome the issue, you can:
A) Set parent component encapsulation to ViewEncapsulation.None
B) Use LESS or similar (otherwise will be a major PITA) for generating CSS
C) replace ":host { /* all your styles here for component and children / }"
with "parent-component-tag-name { / all your styles here for component and children */ }"

With above three-step process, the component styling works pretty much similar to what it was for all Angular2 versions from alpha & beta to RC.4,

Caveat:
You better not forget to prefix your styles with "parent-component-tag-name", and you better not use the same component selector twice for different components.

Probably you could think about a more convenient way to style components (or native HTML elements!) inside the , without totally breaking the encapsulation.

[rvalimaki]

@vicb

I just educated myself about Shadow DOM and it seems that we probably should have a "deep" combinator (previously "/deep/" in v0, currently ">>>" in v1). That would be a direct solution for my problem.

I'll try the >>> selector, and if it's not working with ViewEncapsulation.Emulated, I'll open a new bug report for Angular2.

https://drafts.csswg.org/css-scoping-1/#deep-combinator

[zoechi]

In shadow DOM the ::content selector was used to address transcluded content.
What I figured out to work is ::content in combination with >>>

https://plnkr.co/edit/fhaOzBmIVKkxVGshOzp4?p=preview

  styles: [`
    ::content >>> h1 {
      background: yellow !important;
      font-size: 10px !important;
    }
  `], 

>>> shouldn't be necessary here.
See also http://stackoverflow.com/questions/37763252/custom-styling-on-ng-content-in-angular2-not-working/37764548#37764548

[vicb]

@rvalimaki both >>> and /deep/ work to reach nested components.

@zoechi ::content is ignored by the shim.

[vicb]

that being said >>> is not supposed to style the projected content in the native implementation.

it will for in emulated mode because of a limitation that we might fix at some point.

so best is to style your projected content in its parent component as you would do with the native impl.
You can check "shadow DOM 101, ..." articles - they are about v0 but concepts are still valid.

[rvalimaki]

@zoechi, @vicb

Thanks! That's perfect.

Instead of ::content, we should use :host. Otherwise encapsulation doesn't work.

so the correct syntax is:

styles: [:host >>> h1 { background: yellow !important; font-size: 10px !important; }],

And if there are fellow LESS users, seems that LESS compiler dislikes >>> syntax, so you need to add an alias for that, eg. '@deep: ~">>>"; '
and then use that like '@{deep} { /* your deep styles here */ }