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

fix(ivy): content projection with Shadow DOM not working (#28261)

Browse Source 
Fixes components with native content projection (using `<content>` or `<slot>`) not working under Ivy.

The issue comes from the fact that when creating elements inside a component, we sometimes don't append the element immediately, but we leave it to projection to move it into its final destination. This ends up breaking the native projection, because the slots have to be in place from the beginning. The following changes switch to appending the element immediately when inside a component with Shadow DOM encapsulation.

This PR resolves FW-841.

PR Close #28261
This commit is contained in:
Kristiyan Kostadinov
2019-01-23 20:00:05 +01:00
committed by Jason Aden
parent 32c61f434c
commit f9b103825a
2 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/core/test/linker/projection_integration_spec.ts
View File

@ -381,22 +381,21 @@ describe('projection', () => {
});
if (getDOM().supportsNativeShadowDOM()) {
fixmeIvy('FW-841: Content projection with ShadovDom v0 doesn\'t work')
.it('should support native content projection and isolate styles per component', () => {
TestBed.configureTestingModule({declarations: [SimpleNative1, SimpleNative2]});
TestBed.overrideComponent(MainComp, {
set: {
template: '<simple-native1><div>A</div></simple-native1>' +
'<simple-native2><div>B</div></simple-native2>'
}
});
const main = TestBed.createComponent(MainComp);
it('should support native content projection and isolate styles per component', () => {
TestBed.configureTestingModule({declarations: [SimpleNative1, SimpleNative2]});
TestBed.overrideComponent(MainComp, {
set: {
template: '<simple-native1><div>A</div></simple-native1>' +
'<simple-native2><div>B</div></simple-native2>'
}
});
const main = TestBed.createComponent(MainComp);
const childNodes = getDOM().childNodes(main.nativeElement);
expect(childNodes[0]).toHaveText('div {color: red}SIMPLE1(A)');
expect(childNodes[1]).toHaveText('div {color: blue}SIMPLE2(B)');
main.destroy();
});
const childNodes = getDOM().childNodes(main.nativeElement);
expect(childNodes[0]).toHaveText('div {color: red}SIMPLE1(A)');
expect(childNodes[1]).toHaveText('div {color: blue}SIMPLE2(B)');
main.destroy();
});
}
if (getDOM().supportsDOMEvents()) {