Repository navigation
ViewEncapsulation.Emulated/ViewEncapsulation.Native behave differently on child components #20449
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
In ViewEncapsulation.Native mode: parent styles are applied to the parent and child components.
In ViewEncapsulation.Emulated mode: parent styles are applied only to the parent component.
Expected behavior
As ViewEncapsulation.Emulated is an emulated version of ViewEncapsulation.Native, I expect both modes to have the same behaviour.
So I expect in both modes that the CSS is applied to both parent and child components.
Minimal reproduction of the problem with instructions
The example and code should be self explaining:
http://plnkr.co/edit/DoEdigJs54QRl7d2Qa9c
Environment
Angular version: 5.0.1
But I've seen the issue in earlier versions of Angular too.
Browser:
- [x] Chrome (desktop) version 62.0.3202.62 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
Activity
frederikprijck commentedon Nov 15, 2017
@SteveVanOpstal: According to this commit: ae28e7a the result is expected and it doesn't look like a bug.
The docs also mention:
For more info, check: https://angular.io/guide/component-styles#style-scope & https://angular.io/guide/component-styles#view-encapsulation
If you want to apply them to childs (note: it's deprecated to use, but still works):
See: http://plnkr.co/edit/mtizmMnNx7VpfswFAyi4?p=preview
Note: I do find it odd that the behavior differs from
.native... @vicb any reason this differs fromnative? Or has the native behavior changed since the time this commit was merged? Coz it looks like the docs are also incorrect when you look at them from aNativeperspective.It looks like this is not true for Native viewEncapsulation.
frederikprijck commentedon Nov 15, 2017
Apparently the behavior is only different when u add a emulated directive inside a native one, which probably isn't a supported use case I guess?
SteveVanOpstal commentedon Nov 15, 2017
I've created a plunker (http://plnkr.co/edit/6x4d8eAZMNo6nmgOzUuB?p=preview) which explicitely states that the child component has the same ViewEncapsulation as their parent. This results in the behaviour that is described in the docs (CSS is not applied to the child).
However, I expected the child to take on the ViewEncapsulation of the parent by default (which is not the case).
vicb commentedon Feb 9, 2018
We have 1800 bugs opened - it really helps to add explanation.
SteveVanOpstal commentedon Feb 9, 2018
I made the assumption that a child component would use the same
ViewEncapsulationof the parent.So if you would set the parent to
Nativethat automatically the child will also beNative.The docs however https://angular.io/api/core/Component#encapsulation clearly states that
Emulatedis always the defaultSteveVanOpstal commentedon Feb 9, 2018
The actual issue is that when a parent component has
ViewEncapsulation.Nativeand the child component hasViewEncapsulation.Emulated. The styles of the parent, in the case of the plunker:host p { color: blue; }, will make the child blue. In case both parent and child areEmulatedthe child will not become blueI changed the plunker to be a bit more readable: http://plnkr.co/edit/G4i6T3d03H12fs8d1FVJ?p=info
AndrewKushnir commentedon Oct 15, 2020
Closing this ticket since ViewEncapsulation.Native is deprecated and will be removed in v11 (see deprecations guide).
angular-automatic-lock-bot commentedon Nov 15, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.