Skip to content

Commit

Permalink
fix(runtime): revert slot relocation forwarding (#5222)
Browse files Browse the repository at this point in the history 
This commit reverts some logic in the runtime attempting to handle the use case of slots being slotted into other slots where the slot name changes along the way. The Stencil runtime cannot handle this use case elegantly because it relocates the node in the DOM rather than having references to nodes like the native Shadow DOM.

For this use case, it is recommended to either use shadow encapsulation for all components involved, or to keep the slot name consistent through the component tree.

Reverts 21b3bf0, 9adcfab, and part of 0106e0b

Fixes #5215
  • Loading branch information
@tanner-reits
tanner-reits committed Jan 12, 2024
1 parent 3b4deaa commit a2e119d
Show file tree
Hide file tree
Showing 12 changed files with 0 additions and 301 deletions.
18 changes: 0 additions & 18 deletions src/declarations/stencil-private.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1377,24 +1377,6 @@ export interface RenderNode extends HostElement {
*/
['s-sh']?: string;

/**
* Slot forward slot:
* This is the slot that the original `slot` tag element was going to be
* forwarded to in another element. For instance:
*
* ```html
* <my-cmp>
* <slot name="my-slot" slot="another-slot"></slot>
* </my-cmp>
* ```
*
* In this case, the value would be `another-slot`.
*
* This allows us to correctly set the `slot` attribute on an element when it is moved
* from a non-shadow to shadow element.
*/
['s-fs']?: string;

/**
* Original Location Reference:
* A reference pointing to the comment
Expand Down
37 changes: 0 additions & 37 deletions src/runtime/vdom/vdom-render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,6 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
// remember the content reference comment
elm['s-sr'] = true;

// Persist the name of the slot that this slot was going to be projected into.
elm['s-fs'] = newVNode.$attrs$?.slot;

// remember the content reference comment
elm['s-cr'] = contentRef;

Expand Down Expand Up @@ -192,13 +189,6 @@ const relocateToHostRoot = (parentElm: Element) => {
// Reset so we can correctly move the node around again.
childNode['s-sh'] = undefined;

// When putting an element node back in its original location,
// we need to reset the `slot` attribute back to the value it originally had
// so we can correctly relocate it again in the future
if (childNode.nodeType === NODE_TYPE.ElementNode && !!childNode['s-sn']) {
childNode.setAttribute('slot', childNode['s-sn']);
}

// Need to tell the render pipeline to check to relocate slot content again
checkSlotRelocate = true;
}
Expand Down Expand Up @@ -227,13 +217,6 @@ const putBackInOriginalLocation = (parentElm: Node, recursive: boolean) => {
// Reset so we can correctly move the node around again.
childNode['s-sh'] = undefined;

// When putting an element node back in its original location,
// we need to reset the `slot` attribute back to the value it originally had
// so we can correctly relocate it again in the future
if (childNode.nodeType === NODE_TYPE.ElementNode) {
childNode.setAttribute('slot', childNode['s-sn'] ?? '');
}

checkSlotRelocate = true;
}

Expand Down Expand Up @@ -1086,26 +1069,6 @@ render() {
nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
}

// Handle a use-case where we relocate a slot where
// the slot name changes along the way (for instance, a default to a named slot).
// In this case, we need to update the relocated node's slot attribute to match
// the slot name it is being relocated into.
//
// There is a very niche use case where we may be relocating a text node. For now,
// we ignore anything that is not an element node since non-element nodes cannot have
// attributes to specify the slot. We'll deal with this if it becomes a problem... but super edge-case-y
if (
BUILD.experimentalSlotFixes &&
nodeToRelocate.nodeType === NODE_TYPE.ElementNode &&
slotRefNode['s-fs'] !== nodeToRelocate.getAttribute('slot')
) {
if (!slotRefNode['s-fs']) {
nodeToRelocate.removeAttribute('slot');
} else {
nodeToRelocate.setAttribute('slot', slotRefNode['s-fs']);
}
}

// Add it back to the dom but in its new home
// If we get to this point and `insertBeforeNode` is `null`, that means
// we're just going to append the node as the last child of the parent. Passing
Expand Down
67 changes: 0 additions & 67 deletions test/karma/test-app/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,6 @@ export namespace Components {
}
interface DomReattachCloneHost {
}
interface DropDown {
}
interface DropDownContent {
}
interface DynamicCssVariable {
}
interface DynamicImport {
Expand Down Expand Up @@ -223,8 +219,6 @@ export namespace Components {
}
interface NodeResolution {
}
interface NonShadowHost {
}
interface ParentReflectNanAttribute {
}
interface ParentWithReflectChild {
Expand Down Expand Up @@ -352,11 +346,6 @@ export namespace Components {
}
interface SlotNestedDefaultOrderParent {
}
interface SlotNestedNameChange {
}
interface SlotNestedNameChangeChild {
"state": boolean;
}
interface SlotNestedOrderChild {
}
interface SlotNestedOrderParent {
Expand Down Expand Up @@ -659,18 +648,6 @@ declare global {
prototype: HTMLDomReattachCloneHostElement;
new (): HTMLDomReattachCloneHostElement;
};
interface HTMLDropDownElement extends Components.DropDown, HTMLStencilElement {
}
var HTMLDropDownElement: {
prototype: HTMLDropDownElement;
new (): HTMLDropDownElement;
};
interface HTMLDropDownContentElement extends Components.DropDownContent, HTMLStencilElement {
}
var HTMLDropDownContentElement: {
prototype: HTMLDropDownContentElement;
new (): HTMLDropDownContentElement;
};
interface HTMLDynamicCssVariableElement extends Components.DynamicCssVariable, HTMLStencilElement {
}
var HTMLDynamicCssVariableElement: {
Expand Down Expand Up @@ -1033,12 +1010,6 @@ declare global {
prototype: HTMLNodeResolutionElement;
new (): HTMLNodeResolutionElement;
};
interface HTMLNonShadowHostElement extends Components.NonShadowHost, HTMLStencilElement {
}
var HTMLNonShadowHostElement: {
prototype: HTMLNonShadowHostElement;
new (): HTMLNonShadowHostElement;
};
interface HTMLParentReflectNanAttributeElement extends Components.ParentReflectNanAttribute, HTMLStencilElement {
}
var HTMLParentReflectNanAttributeElement: {
Expand Down Expand Up @@ -1339,18 +1310,6 @@ declare global {
prototype: HTMLSlotNestedDefaultOrderParentElement;
new (): HTMLSlotNestedDefaultOrderParentElement;
};
interface HTMLSlotNestedNameChangeElement extends Components.SlotNestedNameChange, HTMLStencilElement {
}
var HTMLSlotNestedNameChangeElement: {
prototype: HTMLSlotNestedNameChangeElement;
new (): HTMLSlotNestedNameChangeElement;
};
interface HTMLSlotNestedNameChangeChildElement extends Components.SlotNestedNameChangeChild, HTMLStencilElement {
}
var HTMLSlotNestedNameChangeChildElement: {
prototype: HTMLSlotNestedNameChangeChildElement;
new (): HTMLSlotNestedNameChangeChildElement;
};
interface HTMLSlotNestedOrderChildElement extends Components.SlotNestedOrderChild, HTMLStencilElement {
}
var HTMLSlotNestedOrderChildElement: {
Expand Down Expand Up @@ -1532,8 +1491,6 @@ declare global {
"dom-reattach-clone": HTMLDomReattachCloneElement;
"dom-reattach-clone-deep-slot": HTMLDomReattachCloneDeepSlotElement;
"dom-reattach-clone-host": HTMLDomReattachCloneHostElement;
"drop-down": HTMLDropDownElement;
"drop-down-content": HTMLDropDownContentElement;
"dynamic-css-variable": HTMLDynamicCssVariableElement;
"dynamic-import": HTMLDynamicImportElement;
"es5-addclass-svg": HTMLEs5AddclassSvgElement;
Expand Down Expand Up @@ -1579,7 +1536,6 @@ declare global {
"multiple-styles-cmp": HTMLMultipleStylesCmpElement;
"no-delegates-focus": HTMLNoDelegatesFocusElement;
"node-resolution": HTMLNodeResolutionElement;
"non-shadow-host": HTMLNonShadowHostElement;
"parent-reflect-nan-attribute": HTMLParentReflectNanAttributeElement;
"parent-with-reflect-child": HTMLParentWithReflectChildElement;
"reflect-nan-attribute": HTMLReflectNanAttributeElement;
Expand Down Expand Up @@ -1630,8 +1586,6 @@ declare global {
"slot-map-order-root": HTMLSlotMapOrderRootElement;
"slot-nested-default-order-child": HTMLSlotNestedDefaultOrderChildElement;
"slot-nested-default-order-parent": HTMLSlotNestedDefaultOrderParentElement;
"slot-nested-name-change": HTMLSlotNestedNameChangeElement;
"slot-nested-name-change-child": HTMLSlotNestedNameChangeChildElement;
"slot-nested-order-child": HTMLSlotNestedOrderChildElement;
"slot-nested-order-parent": HTMLSlotNestedOrderParentElement;
"slot-ng-if": HTMLSlotNgIfElement;
Expand Down Expand Up @@ -1762,10 +1716,6 @@ declare namespace LocalJSX {
}
interface DomReattachCloneHost {
}
interface DropDown {
}
interface DropDownContent {
}
interface DynamicCssVariable {
}
interface DynamicImport {
Expand Down Expand Up @@ -1878,8 +1828,6 @@ declare namespace LocalJSX {
}
interface NodeResolution {
}
interface NonShadowHost {
}
interface ParentReflectNanAttribute {
}
interface ParentWithReflectChild {
Expand Down Expand Up @@ -2007,11 +1955,6 @@ declare namespace LocalJSX {
}
interface SlotNestedDefaultOrderParent {
}
interface SlotNestedNameChange {
}
interface SlotNestedNameChangeChild {
"state"?: boolean;
}
interface SlotNestedOrderChild {
}
interface SlotNestedOrderParent {
Expand Down Expand Up @@ -2101,8 +2044,6 @@ declare namespace LocalJSX {
"dom-reattach-clone": DomReattachClone;
"dom-reattach-clone-deep-slot": DomReattachCloneDeepSlot;
"dom-reattach-clone-host": DomReattachCloneHost;
"drop-down": DropDown;
"drop-down-content": DropDownContent;
"dynamic-css-variable": DynamicCssVariable;
"dynamic-import": DynamicImport;
"es5-addclass-svg": Es5AddclassSvg;
Expand Down Expand Up @@ -2148,7 +2089,6 @@ declare namespace LocalJSX {
"multiple-styles-cmp": MultipleStylesCmp;
"no-delegates-focus": NoDelegatesFocus;
"node-resolution": NodeResolution;
"non-shadow-host": NonShadowHost;
"parent-reflect-nan-attribute": ParentReflectNanAttribute;
"parent-with-reflect-child": ParentWithReflectChild;
"reflect-nan-attribute": ReflectNanAttribute;
Expand Down Expand Up @@ -2199,8 +2139,6 @@ declare namespace LocalJSX {
"slot-map-order-root": SlotMapOrderRoot;
"slot-nested-default-order-child": SlotNestedDefaultOrderChild;
"slot-nested-default-order-parent": SlotNestedDefaultOrderParent;
"slot-nested-name-change": SlotNestedNameChange;
"slot-nested-name-change-child": SlotNestedNameChangeChild;
"slot-nested-order-child": SlotNestedOrderChild;
"slot-nested-order-parent": SlotNestedOrderParent;
"slot-ng-if": SlotNgIf;
Expand Down Expand Up @@ -2267,8 +2205,6 @@ declare module "@stencil/core" {
"dom-reattach-clone": LocalJSX.DomReattachClone & JSXBase.HTMLAttributes<HTMLDomReattachCloneElement>;
"dom-reattach-clone-deep-slot": LocalJSX.DomReattachCloneDeepSlot & JSXBase.HTMLAttributes<HTMLDomReattachCloneDeepSlotElement>;
"dom-reattach-clone-host": LocalJSX.DomReattachCloneHost & JSXBase.HTMLAttributes<HTMLDomReattachCloneHostElement>;
"drop-down": LocalJSX.DropDown & JSXBase.HTMLAttributes<HTMLDropDownElement>;
"drop-down-content": LocalJSX.DropDownContent & JSXBase.HTMLAttributes<HTMLDropDownContentElement>;
"dynamic-css-variable": LocalJSX.DynamicCssVariable & JSXBase.HTMLAttributes<HTMLDynamicCssVariableElement>;
"dynamic-import": LocalJSX.DynamicImport & JSXBase.HTMLAttributes<HTMLDynamicImportElement>;
"es5-addclass-svg": LocalJSX.Es5AddclassSvg & JSXBase.HTMLAttributes<HTMLEs5AddclassSvgElement>;
Expand Down Expand Up @@ -2314,7 +2250,6 @@ declare module "@stencil/core" {
"multiple-styles-cmp": LocalJSX.MultipleStylesCmp & JSXBase.HTMLAttributes<HTMLMultipleStylesCmpElement>;
"no-delegates-focus": LocalJSX.NoDelegatesFocus & JSXBase.HTMLAttributes<HTMLNoDelegatesFocusElement>;
"node-resolution": LocalJSX.NodeResolution & JSXBase.HTMLAttributes<HTMLNodeResolutionElement>;
"non-shadow-host": LocalJSX.NonShadowHost & JSXBase.HTMLAttributes<HTMLNonShadowHostElement>;
"parent-reflect-nan-attribute": LocalJSX.ParentReflectNanAttribute & JSXBase.HTMLAttributes<HTMLParentReflectNanAttributeElement>;
"parent-with-reflect-child": LocalJSX.ParentWithReflectChild & JSXBase.HTMLAttributes<HTMLParentWithReflectChildElement>;
"reflect-nan-attribute": LocalJSX.ReflectNanAttribute & JSXBase.HTMLAttributes<HTMLReflectNanAttributeElement>;
Expand Down Expand Up @@ -2365,8 +2300,6 @@ declare module "@stencil/core" {
"slot-map-order-root": LocalJSX.SlotMapOrderRoot & JSXBase.HTMLAttributes<HTMLSlotMapOrderRootElement>;
"slot-nested-default-order-child": LocalJSX.SlotNestedDefaultOrderChild & JSXBase.HTMLAttributes<HTMLSlotNestedDefaultOrderChildElement>;
"slot-nested-default-order-parent": LocalJSX.SlotNestedDefaultOrderParent & JSXBase.HTMLAttributes<HTMLSlotNestedDefaultOrderParentElement>;
"slot-nested-name-change": LocalJSX.SlotNestedNameChange & JSXBase.HTMLAttributes<HTMLSlotNestedNameChangeElement>;
"slot-nested-name-change-child": LocalJSX.SlotNestedNameChangeChild & JSXBase.HTMLAttributes<HTMLSlotNestedNameChangeChildElement>;
"slot-nested-order-child": LocalJSX.SlotNestedOrderChild & JSXBase.HTMLAttributes<HTMLSlotNestedOrderChildElement>;
"slot-nested-order-parent": LocalJSX.SlotNestedOrderParent & JSXBase.HTMLAttributes<HTMLSlotNestedOrderParentElement>;
"slot-ng-if": LocalJSX.SlotNgIf & JSXBase.HTMLAttributes<HTMLSlotNgIfElement>;
Expand Down
17 changes: 0 additions & 17 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/drop-down-content.tsx
View file

This file was deleted.

18 changes: 0 additions & 18 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/drop-down.tsx
View file

This file was deleted.

9 changes: 0 additions & 9 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/index.html
View file

This file was deleted.

38 changes: 0 additions & 38 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/karma.spec.ts
View file

This file was deleted.

22 changes: 0 additions & 22 deletions test/karma/test-app/non-shadow-to-shadow-slot-relocation/non-shadow-host.tsx
View file

This file was deleted.

Loading

0 comments on commit a2e119d

Please sign in to comment.