ViewEncapsulation.None styles bleed into ViewEncapsulation.Native components when siblings

[gnomeontherun]

When there are sibling components, one with ViewEncapsulation.Native and the other with ViewEncapsulation.None, the styles that any component stylings are being appended to the shadow root of the one component set to Native.

Plunker: http://plnkr.co/edit/huN8xe0S7xH5CUw4B2P6?p=preview
Updated Stackblitz: https://stackblitz.com/edit/angular-issue-5059?file=src/app/app.component.html

A component set to Native should not adopt the rest of the CSS rules from non-Native components. In the screenshot of the rendered DOM, the last three style elements are appended to the end of the shadow root, but they are actually declared in the other two components which are set to None and Emulated modes.

If all three components are set to Native, then the rules are applied only to the local component, but when they are mixed the rules bleed over into Native (but don't bleed out of Native).

[tbosch]

Right now Angular is doing this so a user can mix and match components with
different ViewEncapsulations.
If we didn't do this, using a component with ViewEncapsulation.None/
Emulated inside of a component with ViewEncapsulation.Native would not work
correctly regarding styling, as shadow roots blocks off all styles from the
document head.

On Sun, Nov 1, 2015 at 8:03 PM Jeremy Wilken notifications@github.com
wrote:

When there are sibling components, one with ViewEncapsulation.Native and
the other with ViewEncapsulation.None, the styles that any component
stylings are being appended to the shadow root of the one component set to
Native.

Plunker: http://plnkr.co/edit/huN8xe0S7xH5CUw4B2P6?p=preview

[image: screen shot 2015-11-01 at 9 58 03 pm]
https://cloud.githubusercontent.com/assets/79500/10874083/afa88d42-80e3-11e5-8f8e-ad09cd8414df.png

A component set to Native should not adopt the rest of the CSS rules from
non-Native components. In the screenshot of the rendered DOM, the last
three style elements are appended to the end of the shadow root, but they
are actually declared in the other two components which are set to None and
Emulated modes.

—
Reply to this email directly or view it on GitHub
#5059.

[gnomeontherun]

That is interesting, but as a counterpoint wouldn't that also potentially cause issues with the Native mode? If I'm using a third party component that is None and it uses the same CSS selector, it would get injected into my component. I certainly didn't expect sibling style rules to get injected into the shadow root of the Native mode component.

I can at least see a case for more granular control over if this occurs or not, perhaps with a StrictNative mode.

Also, since styles inside of the Emulated components are given unique attributes, they won't ever apply to another component, so what is the reason to inject them?

[marclaval]

No longer the case, see http://plnkr.co/edit/XDIJ1YOz4W3uI9t75Jg4?p=preview

[marclaval]

Still the case in fact, cf plnkr above

[dudewad]

@tbosch Re: your comment above:
as shadow roots blocks off all styles from the document head.
Does this apply to ViewEncapsulation.Emulated as well? I am seeing that is the case when using ViewEncapsulation.None inside elements that have the default encapsulation (i.e. not specifying encapsulation). Styles defined in the parent (default encapsulation) component that target the child (ViewEncapsulation.None) component have no effect, and in fact, don't even register in the DOM as far as I can tell from dev tools.
I'm not sure if the issue is related to this one or not.

I'm now using angular 6.x, fwiw.

[splincode]

@gnomeontherun Is the issue relevant?

[gnomeontherun]

Depends on what you mean by relevant. I found this a while back with my investigations of encapsulation modes and believe this is at least not documented still today. I would have called this a bug, but there are reasons it could make sense, but basically anytime you mix modes you're probably playing with 🔥

I've not run into this issue with real world scenarios, but that is because I don't mix modes.

[splincode]

@gnomeontherun Since your demo does not work:

I have update for Angular 6
https://stackblitz.com/edit/angular-anao4x?file=src%2Fapp%2Fapp.component.html

@mhevery The problem is really urgent! Is this solved through Ivy?

[gnomeontherun]

Looks like the plunkr broke sometime in the past few years, but I think this is still a problem. It is at least not what I would expect, as Native should shield you from external styles, where this explicitly injects them from sibling components.

[collinstevens]

I'm experiencing a similar issue, asked here https://stackoverflow.com/questions/53129175/viewencapsulation-emulated-styles-are-copied-into-shadow-root-by-a-viewencapsul. I've also got a simple reproduction here https://github.com/collinstevens/angular-encapsulation.

[petebacondarwin]

@tbosch wrote:

Right now Angular is doing this so a user can mix and match components with
different ViewEncapsulations.
If we didn't do this, using a component with ViewEncapsulation.None/
Emulated inside of a component with ViewEncapsulation.Native would not work
correctly regarding styling, as shadow roots blocks off all styles from the
document head.

As far as I can tell we have a thing called a SharedStylesHost, and each ShadowHost is attached to this, as well as the top level host (i.e. the top level <document>). Whenever we create a new ShadowHost, all the styles from the top level host are copied into the new ShadowHost, so that the styles for None and Emulated components are available.

This doesn't seem right to me.

Instead, I believe that we should create a new SharedStylesHost for each ShadowHost that does not inherit all the styles from the top level. Then, if a component with ViewEncapsulation set to Emulated or None is used within this ShadowHost, the component should add its styles only to the nearest ancestor that has a SharedStylesHost. I think this would solve the problem of None mode styles being available within the ShadowHost but also prevent unwanted styles from appearing in the ShadowDOM from outside.

[petebacondarwin]

Actually this is the same issue as in #7887 where @tbosch actually described the same situation as above. But didn't offer a solution. I'll close that one as although it has some good discussion, there is nothing more than is here already.

[JBusch]

This is still the case with ViewEncapsulation.Shadowdom which is very bad imho.

First, it creates huge overhead inserting all that styles, but even more concerning, you can not depend on the correct rendering of your components because there are styles injected which you explicitly not want in it.

That is the whole point of shadow dom, right?

[petebacondarwin]

Right. I believe the solution is what I wrote here #5059 (comment)

[JBusch]

@petebacondarwin would it be possible to currently use your approch? like overwriting the SharedStylesHost ?

[petebacondarwin]

I am not sure. The SharedStylesHost is a global service that is injected into the DOM renderer. I think we would need to change things so that this could be a tree of hosts... Probably somewhere in the DomRendererFactory2 class...

[JBusch]

Too bad, thank you :)