honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/core/src/render3/node_manipulation.ts
View File

@ -6,9 +6,12 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ViewEncapsulation} from '../core';
import {attachPatchData} from './context_discovery';
import {callHooks} from './hooks';
import {LContainer, NATIVE, VIEWS, unusedValueExportToPlacateAjd as unused1} from './interfaces/container';
import {ComponentDef} from './interfaces/definition';
import {TContainerNode, TElementContainerNode, TElementNode, TNode, TNodeFlags, TNodeType, TProjectionNode, TViewNode, unusedValueExportToPlacateAjd as unused2} from './interfaces/node';
import {unusedValueExportToPlacateAjd as unused3} from './interfaces/projection';
import {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, isProceduralRenderer, unusedValueExportToPlacateAjd as unused4} from './interfaces/renderer';
@ -486,7 +489,7 @@ function executeOnDestroys(view: LView): void {
* `<component><content>delayed due to projection</content></component>`
* - Parent container is disconnected: This can happen when we are inserting a view into
* parent container, which itself is disconnected. For example the parent container is part
* of a View which has not be inserted or is mare for projection but has not been inserted
* of a View which has not be inserted or is made for projection but has not been inserted
* into destination.
*/
function getRenderParent(tNode: TNode, currentView: LView): RElement|null {
@ -519,16 +522,25 @@ function getRenderParent(tNode: TNode, currentView: LView): RElement|null {
}
} else {
ngDevMode && assertNodeType(parent, TNodeType.Element);
if (parent.flags & TNodeFlags.isComponent) {
const tData = currentView[TVIEW].data;
const tNode = tData[parent.index] as TNode;
const encapsulation = (tData[tNode.directiveStart] as ComponentDef<any>).encapsulation;
// We've got a parent which is an element in the current view. We just need to verify if the
// parent element is not a component. Component's content nodes are not inserted immediately
// because they will be projected, and so doing insert at this point would be wasteful.
// Since the projection would then move it to its final destination.
if (parent.flags & TNodeFlags.isComponent) {
// Since the projection would then move it to its final destination. Note that we can't
// make this assumption when using the Shadow DOM, because the native projection placeholders
// (<content> or <slot>) have to be in place as elements are being inserted.
if (encapsulation !== ViewEncapsulation.ShadowDom &&
encapsulation !== ViewEncapsulation.Native) {
return null;
} else {
return getNativeByTNode(parent, currentView) as RElement;
}
}
return getNativeByTNode(parent, currentView) as RElement;
}
}
/**

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

@ -381,8 +381,7 @@ 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', () => {
it('should support native content projection and isolate styles per component', () => {
TestBed.configureTestingModule({declarations: [SimpleNative1, SimpleNative2]});
TestBed.overrideComponent(MainComp, {
set: {