Skip to content

Commit

Permalink
fix(sandbox): non-hijacking elements should be appended to global doc…
Browse files Browse the repository at this point in the history
…ument (#2861)
  • Loading branch information
kuitos authored Dec 26, 2023
1 parent d904f5d commit 6204853
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 5 deletions.
5 changes: 5 additions & 0 deletions .changeset/yellow-frogs-marry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@qiankunjs/sandbox": patch
---

fix(sandbox): non-hijacking elements should be appended to global document
9 changes: 6 additions & 3 deletions packages/sandbox/src/patchers/dynamicAppend/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,11 @@ export function getOverwrittenAppendChildOrInsertBefore(
const element = newChild as unknown as HTMLElement;
const sandboxConfig = getSandboxConfig(element);

// no attached sandbox config means the element is not created from the sandbox environment
// without attached sandbox config means the element is not created from the sandbox environment
// these elements and non-hijacking elements should be appended to global document rather than micro app container
// TODO We can provide a configuration for situations where you expect all of the dom to be inserted into a micro aoo container, especially if the component library does not have the ability to set a popup container
if (!isHijackingTag(element.tagName) || !sandboxConfig) {
return appendChild.call(this, element, refChild) as T;
return appendChild.call(document[target], element, refChild) as T;
}

if (element.tagName) {
Expand Down Expand Up @@ -257,6 +259,7 @@ export function getOverwrittenAppendChildOrInsertBefore(
export function getNewRemoveChild(
nativeFn: typeof HTMLElement.prototype.removeChild,
containerConfigGetter: (element: HTMLElement) => SandboxConfig | undefined,
target: DynamicDomMutationTarget = 'body',
) {
function removeChildInSandbox<T extends Node>(this: HTMLHeadElement | HTMLBodyElement, child: T): T {
const removeChild = nativeFn;
Expand All @@ -266,7 +269,7 @@ export function getNewRemoveChild(
const containerConfig = containerConfigGetter(childElement);

if (!isHijackingTag(tagName) || !containerConfig) {
return removeChild.call(this, childElement) as T;
return removeChild.call(document[target], childElement) as T;
}

try {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ function patchDocumentHeadAndBodyMethods(container: HTMLElement): typeof noop {
getSandboxConfig,
'head',
);
headElement.removeChild = getNewRemoveChild(document.head.removeChild, getSandboxConfig);
headElement.removeChild = getNewRemoveChild(document.head.removeChild, getSandboxConfig, 'head');
};
let containerHeadElement = getContainerHeadElement(container);
if (!containerHeadElement) {
Expand Down Expand Up @@ -217,7 +217,7 @@ function patchDocumentHeadAndBodyMethods(container: HTMLElement): typeof noop {
getSandboxConfig,
'body',
);
containerBodyElement.removeChild = getNewRemoveChild(document.body.removeChild, getSandboxConfig);
containerBodyElement.removeChild = getNewRemoveChild(document.body.removeChild, getSandboxConfig, 'body');

return () => {
if (containerHeadElement) {
Expand Down

0 comments on commit 6204853

Please sign in to comment.