cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(platform-server): avoid clash between server and client style encapsulation attributes (#24158)

Browse Source 
Previously the style encapsulation attributes(_nghost-* and _ngcontent-*) created on the server could overlap with the attributes and styles created by the client side app when it botstraps. In case the client is bootstrapping a lazy route, the client side styles are added before the server-side styles are removed. If the components on the client are bootstrapped in a different order than on the server, the styles generated by the client will cause the elements on the server to have the wrong styles.

The fix puts the styles and attributes generated on the server in a completely differemt space so that they are not affected by the client generated styles. The client generated styles will only affect elements bootstrapped on the client.

PR Close #24158
This commit is contained in:
Vikram Subramanian
2018-05-28 00:20:53 -07:00
committed by Victor Berchet
parent c917e5b5bb
commit b96a3c8def
4 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/platform-server/test/integration_spec.ts
View File

@ -154,7 +154,11 @@ class MyAnimationApp {
class AnimationServerModule {
}
@Component({selector: 'app', template: `Works!`, styles: [':host { color: red; }']})
@Component({
selector: 'app',
template: `<div>Works!</div>`,
styles: ['div {color: blue; } :host { color: red; }']
})
class MyStylesApp {
}
@ -548,6 +552,15 @@ class EscapedTransferStoreModule {
});
}));
it('sets a prefix for the _nghost and _ngcontent attributes', async(() => {
renderModule(ExampleStylesModule, {document: doc}).then(output => {
expect(output).toMatch(
/<html><head><style ng-transition="example-styles">div\[_ngcontent-sc\d+\] {color: blue; } \[_nghost-sc\d+\] { color: red; }<\/style><\/head><body><app _nghost-sc\d+="" ng-version="0.0.0-PLACEHOLDER"><div _ngcontent-sc\d+="">Works!<\/div><\/app><\/body><\/html>/);
called = true;
});
}));
it('should handle false values on attributes', async(() => {
renderModule(FalseAttributesModule, {document: doc}).then(output => {
expect(output).toBe(