@micro-zoe/micro-app 1.0.0-rc.0 → 1.0.0-rc.10

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-rc.0';
+const version = '1.0.0-rc.10';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -15,7 +15,9 @@ const assign = Object.assign;
 // Object prototype methods
 const rawDefineProperty = Object.defineProperty;
 const rawDefineProperties = Object.defineProperties;
+const rawToString = Object.prototype.toString;
 const rawHasOwnProperty = Object.prototype.hasOwnProperty;
+const toTypeString = (value) => rawToString.call(value);
 // is Undefined
 function isUndefined(target) {
     return target === undefined;
@@ -42,19 +44,20 @@ function isFunction(target) {
 }
 // is PlainObject
 function isPlainObject(target) {
-    return toString.call(target) === '[object Object]';
+    return toTypeString(target) === '[object Object]';
 }
 // is Object
 function isObject(target) {
-    return typeof target === 'object';
+    return !isNull(target) && typeof target === 'object';
 }
 // is Promise
 function isPromise(target) {
-    return toString.call(target) === '[object Promise]';
+    return toTypeString(target) === '[object Promise]';
 }
 // is bind function
 function isBoundFunction(target) {
-    return isFunction(target) && target.name.indexOf('bound ') === 0 && !target.hasOwnProperty('prototype');
+    var _a;
+    return isFunction(target) && ((_a = target.name) === null || _a === void 0 ? void 0 : _a.indexOf('bound ')) === 0 && !target.hasOwnProperty('prototype');
 }
 // is constructor function
 function isConstructor(target) {
@@ -86,41 +89,76 @@ function isNode(target) {
     var _a;
     return target instanceof Node || isNumber((_a = target) === null || _a === void 0 ? void 0 : _a.nodeType);
 }
+function isAnchorElement(target) {
+    return toTypeString(target) === '[object HTMLAnchorElement]';
+}
+function isAudioElement(target) {
+    return toTypeString(target) === '[object HTMLAudioElement]';
+}
+function isVideoElement(target) {
+    return toTypeString(target) === '[object HTMLVideoElement]';
+}
 function isLinkElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'LINK';
+    return toTypeString(target) === '[object HTMLLinkElement]';
 }
 function isStyleElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'STYLE';
+    return toTypeString(target) === '[object HTMLStyleElement]';
 }
 function isScriptElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'SCRIPT';
+    return toTypeString(target) === '[object HTMLScriptElement]';
 }
 function isIFrameElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'IFRAME';
+    return toTypeString(target) === '[object HTMLIFrameElement]';
 }
 function isDivElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'DIV';
+    return toTypeString(target) === '[object HTMLDivElement]';
 }
 function isImageElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'IMG';
+    return toTypeString(target) === '[object HTMLImageElement]';
 }
 function isBaseElement(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'BASE';
+    return toTypeString(target) === '[object HTMLBaseElement]';
+}
+function isDocumentFragment(target) {
+    return toTypeString(target) === '[object DocumentFragment]';
 }
 function isMicroAppBody(target) {
-    var _a, _b;
-    return ((_b = (_a = target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'MICRO-APP-BODY';
+    return isElement(target) && target.tagName.toUpperCase() === 'MICRO-APP-BODY';
+}
+function isMicroAppHead(target) {
+    return isElement(target) && target.tagName.toUpperCase() === 'MICRO-APP-HEAD';
 }
 // is ProxyDocument
 function isProxyDocument(target) {
-    return toString.call(target) === '[object ProxyDocument]';
+    return toTypeString(target) === '[object ProxyDocument]';
+}
+function isTargetExtension(path, suffix) {
+    try {
+        return createURL(path).pathname.split('.').pop() === suffix;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function includes(target, searchElement, fromIndex) {
+    if (target == null) {
+        throw new TypeError('includes target is null or undefined');
+    }
+    const O = Object(target);
+    const len = parseInt(O.length, 10) || 0;
+    if (len === 0)
+        return false;
+    // @ts-ignore
+    fromIndex = parseInt(fromIndex, 10) || 0;
+    let i = Math.max(fromIndex >= 0 ? fromIndex : len + fromIndex, 0);
+    while (i < len) {
+        // NaN !== NaN
+        if (searchElement === O[i] || (searchElement !== searchElement && O[i] !== O[i])) {
+            return true;
+        }
+        i++;
+    }
+    return false;
 }
 /**
  * format error log
@@ -158,6 +196,14 @@ function logWarn(msg, appName = null, ...rest) {
 function defer(fn, ...args) {
     Promise.resolve().then(fn.bind(null, ...args));
 }
+/**
+ * async execution with macro task
+ * @param fn callback
+ * @param args params
+ */
+function macro(fn, delay = 0, ...args) {
+    setTimeout(fn.bind(null, ...args), delay);
+}
 /**
  * create URL as MicroLocation
  */
@@ -185,13 +231,13 @@ function formatAppURL(url, appName = null) {
     if (!isString(url) || !url)
         return '';
     try {
-        const { origin, pathname, search } = createURL(addProtocol(url));
-        // If it ends with .html/.node/.php/.net/.etc, don’t need to add /
-        if (/\.(\w+)$/.test(pathname)) {
-            return `${origin}${pathname}${search}`;
-        }
-        const fullPath = `${origin}${pathname}/`.replace(/\/\/$/, '/');
-        return /^https?:\/\//.test(fullPath) ? `${fullPath}${search}` : '';
+        const { origin, pathname, search } = createURL(addProtocol(url), (window.rawWindow || window).location.href);
+        /**
+         * keep the original url unchanged, such as .html .node .php .net .etc, search, except hash
+         * BUG FIX: Never using '/' to complete url, refer to https://github.com/micro-zoe/micro-app/issues/1147
+         */
+        const fullPath = `${origin}${pathname}${search}`;
+        return /^https?:\/\//.test(fullPath) ? fullPath : '';
     }
     catch (e) {
         logError(e, appName);
@@ -214,14 +260,15 @@ function formatAppName(name) {
     return name.replace(/(^\d+)|([^\w\d-_])/gi, '');
 }
 /**
- * Get valid address, such as https://xxx/xx/xx.html to https://xxx/xx/
+ * Get valid address, such as
+ *  1. https://domain/xx/xx.html to https://domain/xx/
+ *  2. https://domain/xx to https://domain/xx/
  * @param url app.url
  */
 function getEffectivePath(url) {
     const { origin, pathname } = createURL(url);
     if (/\.(\w+)$/.test(pathname)) {
-        const fullPath = `${origin}${pathname}`;
-        const pathArr = fullPath.split('/');
+        const pathArr = `${origin}${pathname}`.split('/');
         pathArr.pop();
         return pathArr.join('/') + '/';
     }
@@ -320,63 +367,75 @@ function promiseRequestIdle(callback) {
 /**
  * Record the currently running app.name
  */
-let currentMicroAppName = null;
+let currentAppName = null;
 function setCurrentAppName(appName) {
-    currentMicroAppName = appName;
+    currentAppName = appName;
+}
+// get the currently running app.name
+function getCurrentAppName() {
+    return currentAppName;
 }
 function throttleDeferForSetAppName(appName) {
-    if (currentMicroAppName !== appName) {
+    if (currentAppName !== appName && !getPreventSetState()) {
         setCurrentAppName(appName);
         defer(() => {
             setCurrentAppName(null);
         });
     }
 }
-// get the currently running app.name
-function getCurrentAppName() {
-    return currentMicroAppName;
+// only for iframe document.body(head).querySelector(querySelectorAll)
+let iframeCurrentAppName = null;
+function setIframeCurrentAppName(appName) {
+    iframeCurrentAppName = appName;
 }
-// Clear appName
-function removeDomScope() {
-    setCurrentAppName(null);
+function getIframeCurrentAppName() {
+    return iframeCurrentAppName;
+}
+function throttleDeferForIframeAppName(appName) {
+    if (iframeCurrentAppName !== appName && !getPreventSetState()) {
+        setIframeCurrentAppName(appName);
+        defer(() => {
+            setIframeCurrentAppName(null);
+        });
+    }
+}
+// prevent set app name
+let preventSetState = false;
+function getPreventSetState() {
+    return preventSetState;
+}
+/**
+ * prevent set appName
+ * usage:
+ * removeDomScope(true)
+ * -----> element scope point to base app <-----
+ * removeDomScope(false)
+ */
+function removeDomScope(force) {
+    if (force !== false) {
+        setCurrentAppName(null);
+        setIframeCurrentAppName(null);
+        if (force && !preventSetState) {
+            preventSetState = true;
+            defer(() => {
+                preventSetState = false;
+            });
+        }
+    }
+    else {
+        preventSetState = false;
+    }
 }
 /**
  * Create pure elements
  */
 function pureCreateElement(tagName, options) {
-    const element = document.createElement(tagName, options);
+    const element = (window.rawDocument || document).createElement(tagName, options);
     if (element.__MICRO_APP_NAME__)
         delete element.__MICRO_APP_NAME__;
     element.__PURE_ELEMENT__ = true;
     return element;
 }
-/**
- * clone origin elements to target
- * @param origin Cloned element
- * @param target Accept cloned elements
- * @param deep deep clone or transfer dom
- */
-function cloneContainer(target, origin, deep) {
-    // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
-    if (origin) {
-        target.innerHTML = '';
-        if (deep) {
-            // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
-            const clonedNode = origin.cloneNode(true);
-            const fragment = document.createDocumentFragment();
-            Array.from(clonedNode.childNodes).forEach((node) => {
-                fragment.appendChild(node);
-            });
-            target.appendChild(fragment);
-        }
-        else {
-            Array.from(origin.childNodes).forEach((node) => {
-                target.appendChild(node);
-            });
-        }
-    }
-    return target;
-}
 // is invalid key of querySelector
 function isInvalidQuerySelectorKey(key) {
     return !key || /(^\d)|([^\w\d-_\u4e00-\u9fa5])/gi.test(key);
@@ -550,11 +609,49 @@ function execMicroAppGlobalHook(fn, appName, hookName, ...args) {
         logError(`An error occurred in app ${appName} window.${hookName} \n`, null, e);
     }
 }
+/**
+ * remove all childNode from target node
+ * @param $dom target node
+ */
 function clearDOM($dom) {
     while ($dom === null || $dom === void 0 ? void 0 : $dom.firstChild) {
         $dom.removeChild($dom.firstChild);
     }
 }
+function instanceOf(instance, constructor) {
+    if (instance === null || instance === undefined) {
+        return false;
+    }
+    else if (!isFunction(constructor)) {
+        throw new TypeError("Right-hand side of 'instanceof' is not callable");
+    }
+    let proto = Object.getPrototypeOf(instance);
+    while (proto) {
+        if (proto === constructor.prototype) {
+            return true;
+        }
+        proto = Object.getPrototypeOf(proto);
+    }
+    return false;
+}
+/**
+ * Format event name
+ * In with sandbox, child event and lifeCycles bind to microAppElement, there are two events with same name - mounted unmount, it should be handled specifically to prevent conflicts
+ * Issue: https://github.com/micro-zoe/micro-app/issues/1161
+ * @param type event name
+ * @param appName app name
+ */
+const formatEventList = ['mounted', 'unmount'];
+function formatEventType(type, appName) {
+    return formatEventList.includes(type) ? `${type}-${appName}` : type;
+}
+/**
+ * Is the object empty
+ * target maybe number, string, array ...
+ */
+function isEmptyObject(target) {
+    return isPlainObject(target) ? !Object.keys(target).length : true;
+}
 
 function formatEventInfo(event, element) {
     Object.defineProperties(event, {
@@ -581,7 +678,7 @@ function formatEventInfo(event, element) {
 function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     var _a;
     if (!element) {
-        return logError(`element does not exist in lifecycle ${lifecycleName}`, appName);
+        return logWarn(`element does not exist in lifecycle ${lifecycleName}`, appName);
     }
     element = getRootContainer(element);
     // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
@@ -598,19 +695,19 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     formatEventInfo(event, element);
     // global hooks
     if (isFunction((_a = microApp.options.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
-        microApp.options.lifeCycles[lifecycleName](event);
+        microApp.options.lifeCycles[lifecycleName](event, appName);
     }
     element.dispatchEvent(event);
 }
 /**
  * Dispatch custom event to micro app
  * @param app app
- * @param eventName event name ['unmount', 'appstate-change']
+ * @param eventName event name ['mounted', 'unmount', 'appstate-change', 'statechange']
  * @param detail event detail
  */
 function dispatchCustomEventToMicroApp(app, eventName, detail = {}) {
     var _a;
-    const event = new CustomEvent(eventName, {
+    const event = new CustomEvent(formatEventType(eventName, app.name), {
         detail,
     });
     (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.microAppWindow.dispatchEvent(event);
@@ -654,7 +751,11 @@ class HTMLLoader {
     run(app, successCb) {
         const appName = app.name;
         const htmlUrl = app.ssrUrl || app.url;
-        fetchSource(htmlUrl, appName, { cache: 'no-cache' }).then((htmlStr) => {
+        const isJsResource = isTargetExtension(htmlUrl, 'js');
+        const htmlPromise = isJsResource
+            ? Promise.resolve(`<micro-app-head><script src='${htmlUrl}'></script></micro-app-head><micro-app-body></micro-app-body>`)
+            : fetchSource(htmlUrl, appName, { cache: 'no-cache' });
+        htmlPromise.then((htmlStr) => {
             if (!htmlStr) {
                 const msg = 'html is empty, please check in detail';
                 app.onerror(new Error(msg));
@@ -773,7 +874,7 @@ class CSSParser {
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
         if (!selectors)
-            return parseError('selector missing', this.linkPath);
+            return this.printError('selector missing', this.linkPath);
         this.recordResult(selectors);
         this.matchComments();
         this.styleDeclarations();
@@ -784,9 +885,24 @@ class CSSParser {
         const m = this.commonMatch(/^[^{]+/, skip);
         if (!m)
             return false;
+        /**
+         * NOTE:
+         *  1. :is(h1, h2, h3):has(+ h2, + h3, + h4) {}
+         *    should be ==> micro-app[name=xxx] :is(h1, h2, h3):has(+ h2, + h3, + h4) {}
+         *  2. :dir(ltr) {}
+         *    should be ==> micro-app[name=xxx] :dir(ltr) {}
+         *  3. body :not(div, .fancy) {}
+         *    should be ==> micro-app[name=xxx] micro-app-body :not(div, .fancy) {}
+         *  4. .a, .b, li:nth-child(3)
+         *    should be ==> micro-app[name=xxx] .a, micro-app[name=xxx] .b, micro-app[name=xxx] li:nth-child(3)
+         *  5. :is(.a, .b, .c) a {}
+         *    should be ==> micro-app[name=xxx] :is(.a, .b, .c) a {}
+         *  6. :where(.a, .b, .c) a {}
+         *    should be ==> micro-app[name=xxx] :where(.a, .b, .c) a {}
+         */
         return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
             selector = trim(selector);
-            if (!(this.scopecssDisableNextLine ||
+            if (selector && !(this.scopecssDisableNextLine ||
                 (this.scopecssDisable && (!this.scopecssDisableSelectors.length ||
                     this.scopecssDisableSelectors.includes(selector))) ||
                 rootSelectorREG.test(selector))) {
@@ -803,19 +919,19 @@ class CSSParser {
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
     styleDeclarations() {
         if (!this.matchOpenBrace())
-            return parseError("Declaration missing '{'", this.linkPath);
+            return this.printError("Declaration missing '{'", this.linkPath);
         this.matchAllDeclarations();
         if (!this.matchCloseBrace())
-            return parseError("Declaration missing '}'", this.linkPath);
+            return this.printError("Declaration missing '}'", this.linkPath);
         return true;
     }
-    matchAllDeclarations() {
-        let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^}/])*/, true)[0];
+    matchAllDeclarations(nesting = 0) {
+        let cssValue = this.commonMatch(/^(?:url\(["']?(?:[^)"'}]+)["']?\)|[^{}/])*/, true)[0];
         if (cssValue) {
             if (!this.scopecssDisableNextLine &&
                 (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
                 cssValue = cssValue.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
-                    if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
+                    if (/^((data|blob):|#|%23)/.test($1) || /^(https?:)?\/\//.test($1)) {
                         return all;
                     }
                     // ./a/b.png  ../a/b.png  a/b.png
@@ -829,16 +945,28 @@ class CSSParser {
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        if (!this.cssText || this.cssText.charAt(0) === '}')
+        if (!this.cssText.length)
             return;
         // extract comments in declarations
-        if (this.cssText.charAt(0) === '/' && this.cssText.charAt(1) === '*') {
-            this.matchComments();
+        if (this.cssText.charAt(0) === '/') {
+            if (this.cssText.charAt(1) === '*') {
+                this.matchComments();
+            }
+            else {
+                this.commonMatch(/\/+/);
+            }
         }
-        else {
-            this.commonMatch(/\/+/);
+        else if (this.cssText.charAt(0) === '{') {
+            this.matchOpenBrace();
+            nesting++;
+        }
+        else if (this.cssText.charAt(0) === '}') {
+            if (nesting < 1)
+                return;
+            this.matchCloseBrace();
+            nesting--;
         }
-        return this.matchAllDeclarations();
+        return this.matchAllDeclarations(nesting);
     }
     matchAtRule() {
         if (this.cssText[0] !== '@')
@@ -856,7 +984,8 @@ class CSSParser {
             this.documentRule() ||
             this.pageRule() ||
             this.hostRule() ||
-            this.fontFaceRule();
+            this.fontFaceRule() ||
+            this.layerRule();
     }
     // :global is CSS Modules rule, it will be converted to normal syntax
     // private matchGlobalRule (): boolean | void {
@@ -870,16 +999,16 @@ class CSSParser {
         if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
             return false;
         if (!this.commonMatch(/^[^{]+/))
-            return parseError('@keyframes missing name', this.linkPath);
+            return this.printError('@keyframes missing name', this.linkPath);
         this.matchComments();
         if (!this.matchOpenBrace())
-            return parseError("@keyframes missing '{'", this.linkPath);
+            return this.printError("@keyframes missing '{'", this.linkPath);
         this.matchComments();
         while (this.keyframeRule()) {
             this.matchComments();
         }
         if (!this.matchCloseBrace())
-            return parseError("@keyframes missing '}'", this.linkPath);
+            return this.printError("@keyframes missing '}'", this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -918,17 +1047,30 @@ class CSSParser {
             return false;
         return this.commonHandlerForAtRuleWithSelfRule('font-face');
     }
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
+    layerRule() {
+        if (!this.commonMatch(/^@layer\s*([^{;]+)/))
+            return false;
+        if (!this.matchOpenBrace())
+            return !!this.commonMatch(/^[;]+/);
+        this.matchComments();
+        this.matchRules();
+        if (!this.matchCloseBrace())
+            return this.printError('@layer missing \'}\'', this.linkPath);
+        this.matchLeadingSpaces();
+        return true;
+    }
     // common matcher for @media, @supports, @document, @host, :global, @container
     createMatcherForRuleWithChildRule(reg, name) {
         return () => {
             if (!this.commonMatch(reg))
                 return false;
             if (!this.matchOpenBrace())
-                return parseError(`${name} missing '{'`, this.linkPath);
+                return this.printError(`${name} missing '{'`, this.linkPath);
             this.matchComments();
             this.matchRules();
             if (!this.matchCloseBrace())
-                return parseError(`${name} missing '}'`, this.linkPath);
+                return this.printError(`${name} missing '}'`, this.linkPath);
             this.matchLeadingSpaces();
             return true;
         };
@@ -946,10 +1088,10 @@ class CSSParser {
     // common handler for @font-face, @page
     commonHandlerForAtRuleWithSelfRule(name) {
         if (!this.matchOpenBrace())
-            return parseError(`@${name} missing '{'`, this.linkPath);
+            return this.printError(`@${name} missing '{'`, this.linkPath);
         this.matchAllDeclarations();
         if (!this.matchCloseBrace())
-            return parseError(`@${name} missing '}'`, this.linkPath);
+            return this.printError(`@${name} missing '}'`, this.linkPath);
         this.matchLeadingSpaces();
         return true;
     }
@@ -969,7 +1111,7 @@ class CSSParser {
             ++i;
         i += 2;
         if (this.cssText.charAt(i - 1) === '') {
-            return parseError('End of comment missing', this.linkPath);
+            return this.printError('End of comment missing', this.linkPath);
         }
         // get comment content
         let commentText = this.cssText.slice(2, i - 2);
@@ -1013,7 +1155,7 @@ class CSSParser {
         return this.commonMatch(/^{\s*/);
     }
     matchCloseBrace() {
-        return this.commonMatch(/^}/);
+        return this.commonMatch(/^}\s*/);
     }
     // match and slice the leading spaces
     matchLeadingSpaces() {
@@ -1029,6 +1171,11 @@ class CSSParser {
             this.result += strFragment;
         }
     }
+    printError(msg, linkPath) {
+        if (this.cssText.length) {
+            parseError(msg, linkPath);
+        }
+    }
 }
 /**
  * common method of bind CSS
@@ -1227,7 +1374,7 @@ function extractLinkFromHtml(link, parent, app, isDynamic = false) {
             return { address: href, linkInfo };
         }
     }
-    else if (rel && ['prefetch', 'preload', 'prerender'].includes(rel)) {
+    else if (rel && ['prefetch', 'preload', 'prerender', 'modulepreload', 'icon'].includes(rel)) {
         // preload prefetch prerender ....
         if (isDynamic) {
             replaceComment = document.createComment(`link element with rel=${rel}${href ? ' & href=' + href : ''} removed by micro-app`);
@@ -1272,12 +1419,12 @@ function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
          */
         if (fiberStyleResult) {
             fiberStyleResult.then(() => {
-                fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                fiberLinkTasks.push(() => Promise.resolve(app.onLoad({ html: wrapElement })));
                 serialExecFiberTasks(fiberLinkTasks);
             });
         }
         else {
-            app.onLoad(wrapElement);
+            app.onLoad({ html: wrapElement });
         }
     });
 }
@@ -1441,41 +1588,83 @@ var MicroAppConfig;
     MicroAppConfig["DISABLE_MEMORY_ROUTER"] = "disable-memory-router";
     MicroAppConfig["DISABLE_PATCH_REQUEST"] = "disable-patch-request";
     MicroAppConfig["KEEP_ROUTER_STATE"] = "keep-router-state";
-    MicroAppConfig["HIDDEN_ROUTER"] = "hidden-router";
     MicroAppConfig["KEEP_ALIVE"] = "keep-alive";
     MicroAppConfig["CLEAR_DATA"] = "clear-data";
     MicroAppConfig["SSR"] = "ssr";
     MicroAppConfig["FIBER"] = "fiber";
 })(MicroAppConfig || (MicroAppConfig = {}));
+/**
+ * global key must be static key, they can not rewrite
+ * e.g.
+ * window.Promise = newValue
+ * new Promise ==> still get old value, not newValue, because they are cached by top function
+ * NOTE:
+ * 1. Do not add fetch, XMLHttpRequest, EventSource
+ */
+const GLOBAL_CACHED_KEY = 'window,self,globalThis,document,Document,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
 // prefetch level
 const PREFETCH_LEVEL = [1, 2, 3];
-// memory router constants
+/**
+ * memory router modes
+ * NOTE:
+ *  1. The only difference between native and native-scope is location.origin, in native-scope mode location.origin point to child app
+ *  2. native mode equal to disable-memory-router
+*/
+// 临时注释，1.0版本放开，默认模式切换为state
+// // default mode, sync child app router info to history.state
+// export const DEFAULT_ROUTER_MODE = 'state'
+// // sync child app router info to browser url as search
+// export const ROUTER_MODE_SEARCH = 'search'
+// 临时放开，1.0版本去除
+const ROUTER_MODE_STATE = 'state';
 const DEFAULT_ROUTER_MODE = 'search';
-const ROUTER_MODE_HISTORY = 'history';
-const ROUTER_MODE_CUSTOM = 'custom';
+// render base on browser url, and location.origin location.href point to base app
+const ROUTER_MODE_NATIVE = 'native';
+// render base on browser url, but location.origin location.href point to child app
+const ROUTER_MODE_NATIVE_SCOPE = 'native-scope';
+// search mode, but child router info will not sync to browser url
+const ROUTER_MODE_PURE = 'pure';
 const ROUTER_MODE_LIST = [
     DEFAULT_ROUTER_MODE,
-    ROUTER_MODE_HISTORY,
-    ROUTER_MODE_CUSTOM,
+    ROUTER_MODE_STATE,
+    ROUTER_MODE_NATIVE,
+    ROUTER_MODE_NATIVE_SCOPE,
+    ROUTER_MODE_PURE,
 ];
 // event bound to child app window
-const SCOPE_WINDOW_EVENT = [
+const BASE_SCOPE_WINDOW_EVENT = [
     'popstate',
     'hashchange',
     'load',
-    'beforeunload',
     'unload',
     'unmount',
     'appstate-change',
+    'statechange',
+    'mounted',
 ];
+// bind event of with sandbox
+const SCOPE_WINDOW_EVENT_OF_WITH = BASE_SCOPE_WINDOW_EVENT;
+// bind event of iframe sandbox
+const SCOPE_WINDOW_EVENT_OF_IFRAME = BASE_SCOPE_WINDOW_EVENT.concat([
+    'unhandledrejection',
+    'message'
+]);
 // on event bound to child app window
-const SCOPE_WINDOW_ON_EVENT = [
+// TODO: with和iframe处理方式不同，需修改
+const BASE_SCOPE_WINDOW_ON_EVENT = [
     'onpopstate',
     'onhashchange',
     'onload',
-    'onbeforeunload',
     'onunload',
+    'onerror'
+    // 'onbeforeunload', // remove at 2024.5.30 by cangdu
 ];
+// bind on event of with sandbox
+const SCOPE_WINDOW_ON_EVENT_OF_WITH = BASE_SCOPE_WINDOW_ON_EVENT;
+// bind on event of iframe sandbox
+const SCOPE_WINDOW_ON_EVENT_OF_IFRAME = BASE_SCOPE_WINDOW_ON_EVENT.concat([
+    'onunhandledrejection',
+]);
 // event bound to child app document
 const SCOPE_DOCUMENT_EVENT = [
     'DOMContentLoaded',
@@ -1492,15 +1681,13 @@ const GLOBAL_KEY_TO_WINDOW = [
     'globalThis',
 ];
 const RAW_GLOBAL_TARGET = ['rawWindow', 'rawDocument'];
-/**
- * global key must be static key, they can not rewrite
- * e.g.
- * window.Promise = newValue
- * new Promise ==> still get old value, not newValue, because they are cached by top function
- * NOTE:
- * 1. Do not add fetch, XMLHttpRequest, EventSource
- */
-const GLOBAL_CACHED_KEY = 'window,self,globalThis,document,Document,Array,Object,String,Boolean,Math,Number,Symbol,Date,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history';
+const HIJACK_LOCATION_KEYS = [
+    'host',
+    'hostname',
+    'port',
+    'protocol',
+    'origin',
+];
 
 const scriptTypes = ['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'];
 // whether use type='module' script
@@ -1524,8 +1711,7 @@ function isInlineMode(app, scriptInfo) {
     return (app.inline ||
         scriptInfo.appSpace[app.name].inline ||
         isTypeModule(app, scriptInfo) ||
-        isSpecialScript(app, scriptInfo) ||
-        app.iframe);
+        isSpecialScript(app, scriptInfo));
 }
 // TODO: iframe重新插入window前后不一致，通过iframe Function创建的函数无法复用
 function getEffectWindow(app) {
@@ -1765,16 +1951,16 @@ function fetchScriptsFromHtml(wrapElement, app) {
             logError(err, app.name);
         }, () => {
             if (fiberScriptTasks) {
-                fiberScriptTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                fiberScriptTasks.push(() => Promise.resolve(app.onLoad({ html: wrapElement })));
                 serialExecFiberTasks(fiberScriptTasks);
             }
             else {
-                app.onLoad(wrapElement);
+                app.onLoad({ html: wrapElement });
             }
         });
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
 }
 /**
@@ -1901,6 +2087,7 @@ function execScripts(app, initHook) {
  * @param callback callback of module script
  */
 function runScript(address, app, scriptInfo, callback, replaceElement) {
+    var _a;
     try {
         actionsBeforeRunScript(app);
         const appSpaceData = scriptInfo.appSpace[app.name];
@@ -1931,7 +2118,7 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
              */
             if (!replaceElement) {
                 // TEST IGNORE
-                const parent = app.iframe ? app.sandBox.microBody : app.querySelector('micro-app-body');
+                const parent = app.iframe ? (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.microBody : app.querySelector('micro-app-body');
                 parent === null || parent === void 0 ? void 0 : parent.appendChild(scriptElement);
             }
         }
@@ -1941,6 +2128,8 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
     }
     catch (e) {
         console.error(`[micro-app from ${replaceElement ? 'runDynamicScript' : 'runScript'}] app ${app.name}: `, e, address);
+        // throw error in with sandbox to parent app
+        throw e;
     }
 }
 /**
@@ -1951,7 +2140,7 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
  * @param originScript origin script element
  */
 function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
-    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment(`dynamic script with src='${address}' extract by micro-app`);
     const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
     const runDynamicScript = () => {
         const descriptor = Object.getOwnPropertyDescriptor(globalEnv.rawDocument, 'currentScript');
@@ -1985,7 +2174,7 @@ function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
  * @param scriptInfo scriptInfo
  */
 function runDynamicInlineScript(address, app, scriptInfo) {
-    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic inline script extract by micro-app');
     runScript(address, app, scriptInfo, void 0, replaceElement);
     return replaceElement;
 }
@@ -2096,15 +2285,6 @@ function processCode(configs, code, address) {
     }, code);
 }
 
-/**
- * transform html string to dom
- * @param str string dom
- */
-function getWrapElement(str) {
-    const wrapDiv = pureCreateElement('div');
-    wrapDiv.innerHTML = str;
-    return wrapDiv;
-}
 /**
  * Recursively process each child element
  * @param parent parent element
@@ -2161,7 +2341,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
  * @param app app
  */
 function extractSourceDom(htmlStr, app) {
-    const wrapElement = getWrapElement(htmlStr);
+    const wrapElement = app.parseHtmlString(htmlStr);
     const microAppHead = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-head');
     const microAppBody = globalEnv.rawElementQuerySelector.call(wrapElement, 'micro-app-body');
     if (!microAppHead || !microAppBody) {
@@ -2172,23 +2352,23 @@ function extractSourceDom(htmlStr, app) {
     const fiberStyleTasks = app.isPrefetch || app.fiber ? [] : null;
     flatChildren(wrapElement, app, microAppHead, fiberStyleTasks);
     /**
-     * Style and link are parallel, because it takes a lot of time for link to request resources. During this period, style processing can be performed to improve efficiency.
+     * Style and link are parallel, as it takes a lot of time for link to request resources. During this period, style processing can be performed to improve efficiency.
      */
     const fiberStyleResult = serialExecFiberTasks(fiberStyleTasks);
     if (app.source.links.size) {
         fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult);
     }
     else if (fiberStyleResult) {
-        fiberStyleResult.then(() => app.onLoad(wrapElement));
+        fiberStyleResult.then(() => app.onLoad({ html: wrapElement }));
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
     if (app.source.scripts.size) {
         fetchScriptsFromHtml(wrapElement, app);
     }
     else {
-        app.onLoad(wrapElement);
+        app.onLoad({ html: wrapElement });
     }
 }
 
@@ -2367,7 +2547,7 @@ const eventCenter = new EventCenter();
 function createEventName(appName, fromBaseApp) {
     if (!isString(appName) || !appName)
         return '';
-    return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
+    return fromBaseApp ? `__${appName}_from_base_app__` : `__${appName}_from_micro_app__`;
 }
 // Global data
 class EventCenterForGlobal {
@@ -2666,7 +2846,15 @@ function isConstructorFunction(value) {
 }
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
-    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value)) {
+    /**
+     * In safari, nest app like: A -> B -> C
+     * if B is iframe sandbox, and C is with sandbox, same property of document in C is abnormal
+     * e.g:
+     *  document.all:
+     *    - typeof document.all ==> 'function'
+     *    - document.all.bind ==> undefined
+     */
+    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value) && value.bind) {
         const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
         if (value[cacheKey])
             return value[cacheKey];
@@ -2687,10 +2875,10 @@ function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
     return value;
 }
 
-class Adapter {
-    constructor() {
+class BaseSandbox {
+    constructor(appName, url) {
         // keys that can only assigned to rawWindow
-        this.escapeSetterKeyList = [
+        this.rawWindowScopeKeyList = [
             'location',
         ];
         // keys that can escape to rawWindow
@@ -2703,7 +2891,20 @@ class Adapter {
             'webpackJsonp',
             'webpackHotUpdate',
             'Vue',
+            // TODO: 是否可以和constants/SCOPE_WINDOW_ON_EVENT合并
+            'onpopstate',
+            'onhashchange',
         ];
+        // Properties that can only get and set in microAppWindow, will not escape to rawWindow
+        this.scopeProperties = Array.from(this.staticScopeProperties);
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties newly added to microAppWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
+        this.appName = appName;
+        this.url = url;
         this.injectReactHMRProperty();
     }
     // adapter for react
@@ -2721,6 +2922,14 @@ class Adapter {
         }
     }
 }
+/**
+ * TODO:
+ *  1、将class Adapter去掉，改为CustomWindow，或者让CustomWindow继承Adapter
+ *  2、with沙箱中的常量放入CustomWindow，虽然和iframe沙箱不一致，但更合理
+ * 修改时机：在iframe沙箱支持插件后再修改
+ */
+class CustomWindow {
+}
 // Fix conflict of babel-polyfill@6.x
 function fixBabelPolyfill6() {
     if (globalEnv.rawWindow._babelPolyfill)
@@ -2743,50 +2952,17 @@ function fixReactHMRConflict(app) {
         }
     }
 }
-/**
- * reDefine parentNode of html
- * Scenes:
- *  1. element-ui@2/lib/utils/popper.js
- *    var parent = element.parentNode;
- *    // root is child app window
- *    if (parent === root.document) ...
- */
-function throttleDeferForParentNode(microDocument) {
-    const html = globalEnv.rawDocument.firstElementChild;
-    if ((html === null || html === void 0 ? void 0 : html.parentNode) === globalEnv.rawDocument) {
-        setParentNode(html, microDocument);
-        defer(() => {
-            setParentNode(html, globalEnv.rawDocument);
-        });
-    }
-}
-/**
- * Modify the point of parentNode
- * @param target target Node
- * @param value parentNode
- */
-function setParentNode(target, value) {
-    const descriptor = Object.getOwnPropertyDescriptor(target, 'parentNode');
-    if (!descriptor || descriptor.configurable) {
-        rawDefineProperty(target, 'parentNode', {
-            value,
-            configurable: true,
-        });
-    }
-}
 /**
  * update dom tree of target dom
  * @param container target dom
  * @param appName app name
  */
 function patchElementTree(container, appName) {
-    const children = Array.from(container.children);
+    const children = Array.from(container.childNodes);
     children.length && children.forEach((child) => {
         patchElementTree(child, appName);
     });
-    for (const child of children) {
-        updateElementInfo(child, appName);
-    }
+    updateElementInfo(container, appName);
 }
 /**
  * rewrite baseURI, ownerDocument, __MICRO_APP_NAME__ of target node
@@ -2796,38 +2972,119 @@ function patchElementTree(container, appName) {
  */
 function updateElementInfo(node, appName) {
     var _a, _b;
-    const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
-    if (isNode(node) &&
-        !node.__MICRO_APP_NAME__ &&
+    if (appName &&
+        isNode(node) &&
+        node.__MICRO_APP_NAME__ !== appName &&
         !node.__PURE_ELEMENT__ &&
-        proxyWindow) {
+        !getPreventSetState()) {
         /**
          * TODO:
          *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
          *    经过验证with沙箱不能重写ownerDocument，否则react点击事件会触发两次
-         *  2. with沙箱所有node设置__MICRO_APP_NAME__都使用updateElementInfo
-         *  3. 性能: defineProperty的性能肯定不如直接设置
         */
-        rawDefineProperties(node, {
-            baseURI: {
-                configurable: true,
-                get: () => proxyWindow.location.href,
-            },
+        const props = {
             __MICRO_APP_NAME__: {
                 configurable: true,
+                enumerable: true,
                 writable: true,
                 value: appName,
             },
-        });
+        };
+        if (isAnchorElement(node)) {
+            // a 标签
+            const microApp = AppManager.getInstance().get(appName);
+            if (microApp) {
+                props.href = {
+                    get() {
+                        return this.getAttribute('href');
+                    },
+                    set(value) {
+                        this.setAttribute('href', value);
+                    },
+                };
+            }
+        }
+        if (isImageElement(node) || isVideoElement(node) || isAudioElement(node)) {
+            // @ts-ignore
+            node.crossOrigin = 'anonymous';
+        }
+        rawDefineProperties(node, props);
+        /**
+         * In FireFox, iframe Node.prototype will point to native Node.prototype after insert to document
+         *
+         * Performance:
+         *  iframe element.__proto__ === browser HTMLElement.prototype // Chrome: false, FireFox: true
+         *  iframe element.__proto__ === iframe HTMLElement.prototype // Chrome: true, FireFox: false
+         *
+         * NOTE:
+         *  1. Node.prototype.baseURI
+         *  2. Node.prototype.ownerDocument
+         *  3. Node.prototype.parentNode
+         *  4. Node.prototype.getRootNode
+         *  5. Node.prototype.cloneNode
+         *  6. Element.prototype.innerHTML
+         *  7. Image
+         */
         if (isIframeSandbox(appName)) {
-            rawDefineProperty(node, 'ownerDocument', {
-                configurable: true,
-                get: () => proxyWindow.document,
-            });
+            const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
+            if (proxyWindow) {
+                rawDefineProperties(node, {
+                    baseURI: {
+                        configurable: true,
+                        enumerable: true,
+                        get: () => proxyWindow.location.href,
+                    },
+                    ownerDocument: {
+                        configurable: true,
+                        enumerable: true,
+                        get: () => node !== proxyWindow.document ? proxyWindow.document : null,
+                    },
+                    parentNode: getIframeParentNodeDesc(appName, globalEnv.rawParentNodeDesc),
+                    getRootNode: {
+                        configurable: true,
+                        enumerable: true,
+                        writable: true,
+                        value: function getRootNode() {
+                            return proxyWindow.document;
+                        }
+                    },
+                });
+            }
         }
     }
     return node;
 }
+/**
+ * get Descriptor of Node.prototype.parentNode for iframe
+ * @param appName app name
+ * @param parentNode parentNode Descriptor of iframe or browser
+ */
+function getIframeParentNodeDesc(appName, parentNodeDesc) {
+    return {
+        configurable: true,
+        enumerable: true,
+        get() {
+            var _a, _b, _c, _d;
+            throttleDeferForIframeAppName(appName);
+            const result = (_a = parentNodeDesc.get) === null || _a === void 0 ? void 0 : _a.call(this);
+            /**
+             * If parentNode is <micro-app-body>, return rawDocument.body
+             * Scenes:
+             *  1. element-ui@2/lib/utils/vue-popper.js
+             *    if (this.popperElm.parentNode === document.body) ...
+             * e.g.:
+             *  1. element-ui@2.x el-dropdown
+             * WARNING:
+             *  Will it cause other problems ?
+             *  e.g. target.parentNode.remove(target)
+             */
+            if (isMicroAppBody(result) && ((_b = appInstanceMap.get(appName)) === null || _b === void 0 ? void 0 : _b.container)) {
+                return ((_d = (_c = microApp.options).getRootElementParentNode) === null || _d === void 0 ? void 0 : _d.call(_c, this, appName)) || globalEnv.rawDocument.body;
+            }
+            return result;
+        }
+    };
+}
 
 /**
  * create proxyDocument and MicroDocument, rewrite document of child app
@@ -2866,11 +3123,14 @@ function createProxyDocument(appName, sandbox) {
     const sstEventListenerMap = new Map();
     let onClickHandler = null;
     let sstOnClickHandler = null;
-    const { rawDocument, rawCreateElement, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+    const { rawDocument, rawCreateElement, rawCreateElementNS, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
     function createElement(tagName, options) {
         const element = rawCreateElement.call(rawDocument, tagName, options);
-        element.__MICRO_APP_NAME__ = appName;
-        return element;
+        return updateElementInfo(element, appName);
+    }
+    function createElementNS(namespaceURI, name, options) {
+        const element = rawCreateElementNS.call(rawDocument, namespaceURI, name, options);
+        return updateElementInfo(element, appName);
     }
     /**
      * TODO:
@@ -2955,13 +3215,40 @@ function createProxyDocument(appName, sandbox) {
             eventListenerMap.clear();
         }
     };
+    const genProxyDocumentProps = () => {
+        var _a;
+        // microApp framework built-in Proxy
+        const builtInProxyProps = new Map([
+            ['onclick', (value) => {
+                    if (isFunction(onClickHandler)) {
+                        rawRemoveEventListener.call(rawDocument, 'click', onClickHandler, false);
+                    }
+                    // TODO: listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
+                    if (isFunction(value)) {
+                        rawAddEventListener.call(rawDocument, 'click', value, false);
+                    }
+                    onClickHandler = value;
+                }]
+        ]);
+        // external custom proxy
+        const customProxyDocumentProps = ((_a = microApp.options) === null || _a === void 0 ? void 0 : _a.customProxyDocumentProps) || new Map();
+        // External has higher priority than built-in
+        const mergedProxyDocumentProps = new Map([
+            ...builtInProxyProps,
+            ...customProxyDocumentProps,
+        ]);
+        return mergedProxyDocumentProps;
+    };
+    const mergedProxyDocumentProps = genProxyDocumentProps();
     const proxyDocument = new Proxy(rawDocument, {
         get: (target, key) => {
             var _a;
             throttleDeferForSetAppName(appName);
-            throttleDeferForParentNode(proxyDocument);
+            // TODO: 转换成数据形式，类似iframe的方式
             if (key === 'createElement')
                 return createElement;
+            if (key === 'createElementNS')
+                return createElementNS;
             if (key === Symbol.toStringTag)
                 return 'ProxyDocument';
             if (key === 'defaultView')
@@ -2974,18 +3261,14 @@ function createProxyDocument(appName, sandbox) {
                 return removeEventListener;
             if (key === 'microAppElement')
                 return (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container;
+            if (key === '__MICRO_APP_NAME__')
+                return appName;
             return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
         },
         set: (target, key, value) => {
-            if (key === 'onclick') {
-                if (isFunction(onClickHandler)) {
-                    rawRemoveEventListener.call(rawDocument, 'click', onClickHandler, false);
-                }
-                // TODO: listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
-                if (isFunction(value)) {
-                    rawAddEventListener.call(rawDocument, 'click', value, false);
-                }
-                onClickHandler = value;
+            if (mergedProxyDocumentProps.has(key)) {
+                const proxyCallback = mergedProxyDocumentProps.get(key);
+                proxyCallback(value);
             }
             else if (key !== 'microAppElement') {
                 /**
@@ -3018,7 +3301,8 @@ function createMicroDocument(appName, proxyDocument) {
     class MicroDocument {
         static [Symbol.hasInstance](target) {
             let proto = target;
-            while (proto = Object.getPrototypeOf(proto)) {
+            while (proto) {
+                proto = Object.getPrototypeOf(proto);
                 if (proto === MicroDocument.prototype) {
                     return true;
                 }
@@ -3061,7 +3345,7 @@ function createMicroDocument(appName, proxyDocument) {
 function patchWindow(appName, microAppWindow, sandbox) {
     patchWindowProperty(microAppWindow);
     createProxyWindow(appName, microAppWindow, sandbox);
-    return patchWindowEffect(microAppWindow);
+    return patchWindowEffect(microAppWindow, appName);
 }
 /**
  * rewrite special properties of window
@@ -3072,7 +3356,7 @@ function patchWindowProperty(microAppWindow) {
     const rawWindow = globalEnv.rawWindow;
     Object.getOwnPropertyNames(rawWindow)
         .filter((key) => {
-        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT.includes(key);
+        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT_OF_WITH.includes(key);
     })
         .forEach((eventName) => {
         const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(rawWindow, eventName) || {
@@ -3102,22 +3386,22 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
             throttleDeferForSetAppName(appName);
             if (Reflect.has(target, key) ||
                 (isString(key) && /^__MICRO_APP_/.test(key)) ||
-                sandbox.scopeProperties.includes(key)) {
-                if (RAW_GLOBAL_TARGET.includes(key))
+                includes(sandbox.scopeProperties, key)) {
+                if (includes(RAW_GLOBAL_TARGET, key))
                     removeDomScope();
                 return Reflect.get(target, key);
             }
             return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
         },
         set: (target, key, value) => {
-            if (sandbox.adapter.escapeSetterKeyList.includes(key)) {
+            if (includes(sandbox.rawWindowScopeKeyList, key)) {
                 Reflect.set(rawWindow, key, value);
             }
             else if (
             // target.hasOwnProperty has been rewritten
             !rawHasOwnProperty.call(target, key) &&
                 rawHasOwnProperty.call(rawWindow, key) &&
-                !sandbox.scopeProperties.includes(key)) {
+                !includes(sandbox.scopeProperties, key)) {
                 const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
                 const { configurable, enumerable, writable, set } = descriptor;
                 // set value because it can be set
@@ -3130,32 +3414,37 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
                 sandbox.injectedKeys.add(key);
             }
             else {
-                !Reflect.has(target, key) && sandbox.injectedKeys.add(key);
+                // all scopeProperties will add to injectedKeys, use for key in window (Proxy.has)
+                if (!Reflect.has(target, key) || includes(sandbox.scopeProperties, key)) {
+                    sandbox.injectedKeys.add(key);
+                }
                 Reflect.set(target, key, value);
             }
-            if ((sandbox.escapeProperties.includes(key) ||
-                (sandbox.adapter.staticEscapeProperties.includes(key) &&
+            if ((includes(sandbox.escapeProperties, key) ||
+                (
+                // TODO: staticEscapeProperties 合并到 escapeProperties
+                includes(sandbox.staticEscapeProperties, key) &&
                     !Reflect.has(rawWindow, key))) &&
-                !sandbox.scopeProperties.includes(key)) {
+                !includes(sandbox.scopeProperties, key)) {
                 !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
                 Reflect.set(rawWindow, key, value);
             }
             return true;
         },
         has: (target, key) => {
-            if (sandbox.scopeProperties.includes(key)) {
-                /**
-                 * Some keywords, such as Vue, need to meet two conditions at the same time:
-                 * 1. 'Vue' in window --> false
-                 * 2. Vue (top level variable) // undefined
-                 * Issue https://github.com/micro-zoe/micro-app/issues/686
-                 */
-                if (sandbox.adapter.staticScopeProperties.includes(key)) {
-                    return !!target[key];
+            /**
+             * Some keywords, such as Vue, need to meet two conditions at the same time:
+             * 1. window.Vue --> undefined
+             * 2. 'Vue' in window --> false
+             * Issue https://github.com/micro-zoe/micro-app/issues/686
+             */
+            if (includes(sandbox.scopeProperties, key)) {
+                if (sandbox.injectedKeys.has(key)) {
+                    return Reflect.has(target, key); // true
                 }
-                return key in target;
+                return !!target[key]; // false
             }
-            return key in target || key in rawWindow;
+            return Reflect.has(target, key) || Reflect.has(rawWindow, key);
         },
         // Object.getOwnPropertyDescriptor(window, key)
         getOwnPropertyDescriptor: (target, key) => {
@@ -3200,14 +3489,26 @@ function createProxyWindow(appName, microAppWindow, sandbox) {
  * Rewrite side-effect events
  * @param microAppWindow micro window
  */
-function patchWindowEffect(microAppWindow) {
+function patchWindowEffect(microAppWindow, appName) {
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
     const { rawWindow, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, } = globalEnv;
+    /**
+     * All events will bind to microAppElement or rawWindow
+     * Some special events, such as popstate、load、unmount、appstate-change、statechange..., bind to microAppElement, others bind to rawWindow
+     * NOTE:
+     *  1、At first, microAppWindow = new EventTarget(), but it can not compatible with iOS 14 or below, so microAppElement was used instead. (2024.1.22)
+     * @param type event name
+     * @returns microAppElement/rawWindow
+     */
     function getEventTarget(type) {
-        return SCOPE_WINDOW_EVENT.includes(type) ? microAppWindow : rawWindow;
+        var _a;
+        if (SCOPE_WINDOW_EVENT_OF_WITH.includes(type) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
+            return getRootContainer(appInstanceMap.get(appName).container);
+        }
+        return rawWindow;
     }
     /**
      * listener may be null, e.g test-passive
@@ -3217,6 +3518,7 @@ function patchWindowEffect(microAppWindow) {
      *  window.addEventListener.call(非window, type, listener, options)
      */
     microAppWindow.addEventListener = function (type, listener, options) {
+        type = formatEventType(type, appName);
         const listenerList = eventListenerMap.get(type);
         if (listenerList) {
             listenerList.add(listener);
@@ -3228,6 +3530,7 @@ function patchWindowEffect(microAppWindow) {
         rawAddEventListener.call(getEventTarget(type), type, listener, options);
     };
     microAppWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, appName);
         const listenerList = eventListenerMap.get(type);
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
@@ -3320,42 +3623,44 @@ function patchWindowEffect(microAppWindow) {
 }
 
 // set micro app state to origin state
-function setMicroState(appName, microState) {
-    if (!isRouterModeCustom(appName)) {
-        const rawState = globalEnv.rawWindow.history.state;
-        const additionalState = {
-            microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
-                [appName]: microState
-            })
-        };
-        // create new state object
-        return assign({}, rawState, additionalState);
-    }
-    return microState;
+function setMicroState(appName, microState, targetLocation) {
+    // TODO: 验证native模式下修改state nextjs路由是否正常
+    const rawState = globalEnv.rawWindow.history.state;
+    const additionalState = {
+        __MICRO_APP_STATE__: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__, {
+            [appName]: {
+                fullPath: targetLocation ? targetLocation.pathname + targetLocation.search + targetLocation.hash : null,
+                state: microState !== null && microState !== void 0 ? microState : null,
+                mode: getRouterMode(appName),
+            }
+        }),
+    };
+    // create new state object
+    return assign({}, rawState, additionalState);
 }
 // delete micro app state form origin state
 function removeMicroState(appName, rawState) {
-    if (!isRouterModeCustom(appName)) {
-        if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
-            if (!isUndefined(rawState.microAppState[appName])) {
-                delete rawState.microAppState[appName];
-            }
-            if (!Object.keys(rawState.microAppState).length) {
-                delete rawState.microAppState;
-            }
+    if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__)) {
+        if (!isUndefined(rawState.__MICRO_APP_STATE__[appName])) {
+            delete rawState.__MICRO_APP_STATE__[appName];
+        }
+        if (!Object.keys(rawState.__MICRO_APP_STATE__).length) {
+            delete rawState.__MICRO_APP_STATE__;
         }
-        return assign({}, rawState);
     }
-    return rawState;
+    return !isEmptyObject(rawState) ? assign({}, rawState) : null;
 }
 // get micro app state form origin state
 function getMicroState(appName) {
+    var _a, _b;
+    const rawState = globalEnv.rawWindow.history.state;
+    return ((_b = (_a = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _a === void 0 ? void 0 : _a[appName]) === null || _b === void 0 ? void 0 : _b.state) || null;
+}
+// get micro app router info state form origin state
+function getMicroRouterInfoState(appName) {
     var _a;
     const rawState = globalEnv.rawWindow.history.state;
-    if (!isRouterModeCustom(appName)) {
-        return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
-    }
-    return rawState;
+    return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _a === void 0 ? void 0 : _a[appName]) || null;
 }
 const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
@@ -3391,14 +3696,35 @@ function formatQueryAppName(appName) {
  * @param appName app.name
  */
 function getMicroPathFromURL(appName) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const rawLocation = globalEnv.rawWindow.location;
-    if (!isRouterModeCustom(appName)) {
+    const rawState = globalEnv.rawWindow.history.state;
+    if (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
         const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
         return isString(microPath) ? decodeMicroPath(microPath) : null;
     }
-    return rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    /**
+     * Get fullPath from __MICRO_APP_STATE__
+     * NOTE:
+     *  1. state mode: all base on __MICRO_APP_STATE__
+     *  2. pure mode: navigate by location.xxx may contain one-time information in __MICRO_APP_STATE__
+     *  3. native mode: vue-router@4 will exec replaceState with history.state before pushState, like:
+     *    history.replaceState(
+     *      assign({}, history.state, {...}),
+     *      title,
+     *      history.state.current, <---
+     *    )
+     *    when base app jump to another page from child page, it will replace child path with base app path
+     *   e.g: base-home --> child-home --> child-about(will replace with child-home before jump to base-home) --> base-home, when go back, it will back to child-home not child-about
+     *   So we take the fullPath as standard
+     */
+    // 问题：1、同一个页面多个子应用，一个修改后... --- native模式不支持多个子应用同时渲染，多个子应用推荐使用其它模式
+    // if (isRouterModeCustom(appName)) {
+    //   return rawLocation.pathname + rawLocation.search + rawLocation.hash
+    // }
+    // return rawState?.__MICRO_APP_STATE__?.[appName]?.fullPath || null
+    return ((_d = (_c = rawState === null || rawState === void 0 ? void 0 : rawState.__MICRO_APP_STATE__) === null || _c === void 0 ? void 0 : _c[appName]) === null || _d === void 0 ? void 0 : _d.fullPath) || (isRouterModeCustom(appName) ? rawLocation.pathname + rawLocation.search + rawLocation.hash : null);
 }
 /**
  * Attach child app fullPath to browser url
@@ -3406,10 +3732,11 @@ function getMicroPathFromURL(appName) {
  * @param targetLocation location of child app or rawLocation of window
  */
 function setMicroPathToURL(appName, targetLocation) {
-    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+    const rawLocation = globalEnv.rawWindow.location;
+    let targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
-        let { pathname, search, hash } = globalEnv.rawWindow.location;
+    if (isRouterModeSearch(appName)) {
+        let { pathname, search, hash } = rawLocation;
         const queryObject = getQueryObjectFromURL(search, hash);
         const encodedMicroPath = encodeMicroPath(targetFullPath);
         /**
@@ -3419,6 +3746,7 @@ function setMicroPathToURL(appName, targetLocation) {
         // If hash exists and search does not exist, it is considered as a hash route
         if (hash && !search) {
             isAttach2Hash = true;
+            // TODO: 这里和下面的if判断可以简化一下
             if (queryObject.hashQuery) {
                 queryObject.hashQuery[formatQueryAppName(appName)] = encodedMicroPath;
             }
@@ -3446,6 +3774,9 @@ function setMicroPathToURL(appName, targetLocation) {
             isAttach2Hash,
         };
     }
+    if (isRouterModeState(appName) || isRouterModePure(appName)) {
+        targetFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    }
     return {
         fullPath: targetFullPath,
         isAttach2Hash,
@@ -3454,13 +3785,12 @@ function setMicroPathToURL(appName, targetLocation) {
 /**
  * Delete child app fullPath from browser url
  * @param appName app.name
- * @param targetLocation target Location, default is rawLocation
  */
-function removeMicroPathFromURL(appName, targetLocation) {
+function removeMicroPathFromURL(appName) {
     var _a, _b, _c, _d;
-    let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
+    let { pathname, search, hash } = globalEnv.rawWindow.location;
     let isAttach2Hash = false;
-    if (!isRouterModeCustom(appName)) {
+    if (isRouterModeSearch(appName)) {
         const queryObject = getQueryObjectFromURL(search, hash);
         if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
             isAttach2Hash = true;
@@ -3521,14 +3851,38 @@ function isEffectiveApp(appName) {
     return !!(app && !app.isPrefetch);
 }
 /**
- * router mode is custom
- * NOTE:
- *  1. if sandbox disabled, router mode defaults to custom
- *  2. if app not exist, router mode defaults to custom
+ * get router mode of app
+ * NOTE: app maybe undefined
  */
-function isRouterModeCustom(appName) {
-    const app = appInstanceMap.get(appName);
-    return !app || !app.sandBox || app.routerMode === ROUTER_MODE_CUSTOM;
+function getRouterMode(appName) {
+    var _a;
+    return (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.routerMode;
+}
+// router mode is search
+function isRouterModeSearch(appName) {
+    return getRouterMode(appName) === DEFAULT_ROUTER_MODE;
+}
+// router mode is state
+function isRouterModeState(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_STATE;
+}
+// router mode is history
+function isRouterModeNative(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_NATIVE;
+}
+// router mode is disable
+function isRouterModeNativeScope(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_NATIVE_SCOPE;
+}
+// router mode is pure
+function isRouterModePure(appName) {
+    return getRouterMode(appName) === ROUTER_MODE_PURE;
+}
+/**
+ * router mode is history or disable
+ */
+function isRouterModeCustom(appName) {
+    return isRouterModeNative(appName) || isRouterModeNativeScope(appName);
 }
 /**
  * get memory router mode of child app
@@ -3536,21 +3890,21 @@ function isRouterModeCustom(appName) {
  *  1. if microAppElement exists, it means the app render by the micro-app element
  *  2. if microAppElement not exists, it means it is prerender app
  * @param mode native config
- * @param microAppElement micro-app element
- * @returns mode
+ * @param inlineDisableMemoryRouter disable-memory-router set by micro-app element or prerender
+ * @returns router mode
  */
-function getRouterMode(mode, microAppElement) {
-    let routerMode;
+function initRouterMode(mode, inlineDisableMemoryRouter) {
     /**
      * compatible with disable-memory-router in older versions
-     * if disable-memory-router is true, router-mode will be custom
+     * if disable-memory-router is true, router-mode will be disable
+     * Priority:
+     *  inline disable-memory-router > inline router-mode > global disable-memory-router > global router-mode
      */
-    if (microAppElement) {
-        routerMode = microAppElement.getDisposeResult('disable-memory-router') ? ROUTER_MODE_CUSTOM : mode || microApp.options['router-mode'] || '';
-    }
-    else {
-        routerMode = microApp.options['disable-memory-router'] ? ROUTER_MODE_CUSTOM : mode || microApp.options['router-mode'] || '';
-    }
+    const routerMode = ((inlineDisableMemoryRouter && ROUTER_MODE_NATIVE) ||
+        mode ||
+        (microApp.options['disable-memory-router'] && ROUTER_MODE_NATIVE) ||
+        microApp.options['router-mode'] ||
+        DEFAULT_ROUTER_MODE);
     return ROUTER_MODE_LIST.includes(routerMode) ? routerMode : DEFAULT_ROUTER_MODE;
 }
 
@@ -3565,6 +3919,7 @@ function addHistoryListener(appName) {
     const rawWindow = globalEnv.rawWindow;
     // handle popstate event and distribute to child app
     const popStateHandler = (e) => {
+        var _a, _b, _c;
         /**
          * 1. unmount app & hidden keep-alive app will not receive popstate event
          * 2. filter out onlyForBrowser
@@ -3574,7 +3929,28 @@ function addHistoryListener(appName) {
             excludePreRender: true,
         }).includes(appName) &&
             !e.onlyForBrowser) {
-            updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName));
+            /**
+             * base app may respond to popstateEvent async(lazy load page & browser back/forward), but child app will respond to popstateEvent immediately(vue2, react), this will cause some problems
+             * 2 solutions:
+             *  1. child app respond to popstateEvent async -- router-event-delay
+             *  2. child app will not respond to popstateEvent in some scenarios (history.state===null || history.state?__MICRO_APP_STATE__[appName])
+             * NOTE 1:
+             *  1. browser back/forward
+             *  2. location.hash/search/pathname = xxx
+             *  3. <a href="/#/xxx">, <a href="/xxx">
+             *  4. history.back/go/forward
+             *  5. history.pushState/replaceState
+             *
+             * NOTE2:
+             *  1、react16 hash mode navigate by location.hash = xxx, history.state is always null, but react16 respond to popstateEvent sync
+             *  2、multiple child apps may has problems
+             */
+            if (!isRouterModeCustom(appName) ||
+                !globalEnv.rawWindow.history.state ||
+                getMicroRouterInfoState(appName)) {
+                const container = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container;
+                macro(() => updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName)), (_c = (_b = (container && getRootContainer(container))) === null || _b === void 0 ? void 0 : _b.getRouterEventDelay()) !== null && _c !== void 0 ? _c : 0);
+            }
         }
     };
     rawWindow.addEventListener('popstate', popStateHandler);
@@ -3592,24 +3968,26 @@ function addHistoryListener(appName) {
  */
 function updateMicroLocationWithEvent(appName, targetFullPath) {
     const app = appInstanceMap.get(appName);
-    const proxyWindow = app.sandBox.proxyWindow;
-    const microAppWindow = app.sandBox.microAppWindow;
-    let isHashChange = false;
-    // for hashChangeEvent
-    const oldHref = proxyWindow.location.href;
-    // Do not attach micro state to url when targetFullPath is empty
-    if (targetFullPath) {
-        const oldHash = proxyWindow.location.hash;
-        updateMicroLocation(appName, targetFullPath, microAppWindow.location);
-        isHashChange = proxyWindow.location.hash !== oldHash;
-    }
-    // dispatch formatted popStateEvent to child
-    dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
-    // dispatch formatted hashChangeEvent to child when hash change
-    if (isHashChange)
-        dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
-    // clear element scope before trigger event of next app
-    removeDomScope();
+    if (app === null || app === void 0 ? void 0 : app.sandBox) {
+        const proxyWindow = app.sandBox.proxyWindow;
+        const microAppWindow = app.sandBox.microAppWindow;
+        let isHashChange = false;
+        // for hashChangeEvent
+        const oldHref = proxyWindow.location.href;
+        // Do not attach micro state to url when targetFullPath is empty
+        if (targetFullPath) {
+            const oldHash = proxyWindow.location.hash;
+            updateMicroLocation(appName, targetFullPath, microAppWindow.location);
+            isHashChange = proxyWindow.location.hash !== oldHash;
+        }
+        // dispatch formatted popStateEvent to child
+        dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
+        // dispatch formatted hashChangeEvent to child when hash change
+        if (isHashChange)
+            dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
+        // clear element scope before trigger event of next app
+        removeDomScope();
+    }
 }
 /**
  * dispatch formatted popstate event to microApp
@@ -3622,14 +4000,18 @@ function dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow) {
      * TODO: test
      * angular14 takes e.type as type judgment
      * when e.type is popstate-appName popstate event will be invalid
+     * Object.defineProperty(newPopStateEvent, 'type', {
+     *    value: 'popstate',
+     *    writable: true,
+     *    configurable: true,
+     *    enumerable: true,
+     * })
+     */
+    /**
+     * create PopStateEvent named popstate-appName with sub app state
+     * TODO: feeling like there's something wrong, check carefully
+     *  In native mode, getMicroState(appName) return rawWindow.history.state when use microApp.router.push/replace or other scenes when state.__MICRO_APP_STATE__[appName] is null
      */
-    // Object.defineProperty(newPopStateEvent, 'type', {
-    //   value: 'popstate',
-    //   writable: true,
-    //   configurable: true,
-    //   enumerable: true,
-    // })
-    // create PopStateEvent named popstate-appName with sub app state
     const newPopStateEvent = new PopStateEvent('popstate', { state: getMicroState(appName) });
     microAppWindow.dispatchEvent(newPopStateEvent);
     if (!isIframeSandbox(appName)) {
@@ -3696,7 +4078,7 @@ function dispatchNativeEvent(appName, onlyForBrowser, oldHref) {
  * create proxyHistory for microApp
  * MDN https://developer.mozilla.org/en-US/docs/Web/API/History
  * @param appName app name
- * @param microLocation microApp location
+ * @param microLocation microApp location(with: proxyLocation iframe: iframeWindow.location)
  */
 function createMicroHistory(appName, microLocation) {
     const rawHistory = globalEnv.rawWindow.history;
@@ -3704,39 +4086,46 @@ function createMicroHistory(appName, microLocation) {
         return function (...rests) {
             var _a, _b, _c;
             // TODO: 测试iframe的URL兼容isURL的情况
-            if (isString(rests[2]) || isURL(rests[2])) {
-                const targetLocation = createURL(rests[2], microLocation.href);
-                const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0]), rests[1]);
-                if (targetFullPath !== microLocation.fullPath) {
-                    updateMicroLocation(appName, targetFullPath, microLocation);
-                }
-                (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
+            rests[2] = isUndefined(rests[2]) || isNull(rests[2]) || ('' + rests[2] === '') ? microLocation.href : '' + rests[2];
+            const targetLocation = createURL(rests[2], microLocation.href);
+            const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+            if (!isRouterModePure(appName)) {
+                navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rests[0], targetLocation), rests[1]);
             }
-            else {
-                nativeHistoryNavigate(appName, methodName, rests[2], rests[0], rests[1]);
+            if (targetFullPath !== microLocation.fullPath) {
+                updateMicroLocation(appName, targetFullPath, microLocation);
             }
+            (_c = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : (_b = _a.sandBox).updateIframeBase) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
     }
-    const pushState = getMicroHistoryMethod('pushState');
-    const replaceState = getMicroHistoryMethod('replaceState');
-    if (isIframeSandbox(appName))
-        return { pushState, replaceState };
+    const originalHistory = {
+        pushState: getMicroHistoryMethod('pushState'),
+        replaceState: getMicroHistoryMethod('replaceState'),
+    };
+    if (isIframeSandbox(appName)) {
+        return assign({
+            go(delta) {
+                return rawHistory.go(delta);
+            }
+        }, originalHistory);
+    }
     return new Proxy(rawHistory, {
         get(target, key) {
-            if (key === 'state') {
-                return getMicroState(appName);
-            }
-            else if (key === 'pushState') {
-                return pushState;
+            if (key === 'pushState' || key === 'replaceState') {
+                return originalHistory[key];
             }
-            else if (key === 'replaceState') {
-                return replaceState;
+            else if (key === 'state') {
+                return getMicroState(appName);
             }
             return bindFunctionToRawTarget(Reflect.get(target, key), target, 'HISTORY');
         },
         set(target, key, value) {
-            Reflect.set(target, key, value);
+            if (key === 'pushState' || key === 'replaceState') {
+                originalHistory[key] = value;
+            }
+            else {
+                Reflect.set(target, key, value);
+            }
             /**
              * If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
              * e.g. history.state = {}
@@ -3784,8 +4173,8 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
         // navigate with native history method
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
-        // TODO: 如果所有模式统一发送popstate事件，则!isRouterModeCustom(appName)要去掉
-        if (oldFullPath !== result.fullPath && !isRouterModeCustom(appName)) {
+        // just search mode will dispatch native event
+        if (oldFullPath !== result.fullPath && isRouterModeSearch(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
         }
     }
@@ -3801,22 +4190,22 @@ function attachRouteToBrowserURL(appName, result, state) {
     navigateWithNativeEvent(appName, 'replaceState', result, true, state);
 }
 /**
- * When path is same, keep the microAppState in history.state
- * Fix bug of missing microAppState when base app is next.js or angular
+ * When path is same, keep the __MICRO_APP_STATE__ in history.state
+ * Fix bug of missing __MICRO_APP_STATE__ when base app is next.js or angular
  * @param method history.pushState/replaceState
  */
 function reWriteHistoryMethod(method) {
     const rawWindow = globalEnv.rawWindow;
     return function (...rests) {
         var _a;
-        if (((_a = rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.microAppState) &&
-            (!isPlainObject(rests[0]) || !rests[0].microAppState) &&
+        if (((_a = rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.__MICRO_APP_STATE__) &&
+            (!isPlainObject(rests[0]) || !rests[0].__MICRO_APP_STATE__) &&
             (isString(rests[2]) || isURL(rests[2]))) {
             const currentHref = rawWindow.location.href;
             const targetLocation = createURL(rests[2], currentHref);
             if (targetLocation.href === currentHref) {
                 rests[0] = assign({}, rests[0], {
-                    microAppState: rawWindow.history.state.microAppState,
+                    __MICRO_APP_STATE__: rawWindow.history.state.__MICRO_APP_STATE__,
                 });
             }
         }
@@ -3832,10 +4221,23 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            if (!isRouterModeCustom(appName) && !getMicroPathFromURL(appName)) {
+            if ((isRouterModeSearch(appName) || isRouterModeState(appName)) && !getMicroPathFromURL(appName)) {
                 const app = appInstanceMap.get(appName);
-                attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+                attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName), app.sandBox.proxyWindow.location));
+            }
+            if (isRouterModeCustom(appName) && !getMicroRouterInfoState(appName)) {
+                nativeHistoryNavigate(appName, 'replaceState', rawWindow.location.href, setMicroState(appName));
             }
+            // if (isRouterModeCustom(appName) || isRouterModeSearch(appName)) {
+            /**
+               * history.pushState/replaceState后主动触发子应用响应
+               * 问题：子应用的卸载可能是异步的，而跳转的地址不一定在基础路径中，太快响应pushState可能会导致url地址被子应用改变或者子应用404，Promise太快卸载时出问题、setTimeout太慢keep-alive二次渲染后出问题
+               *  1、history.pushState/replaceState执行后，子应用以异步的形式被主应用卸载，Promise响应时子应用还在，导致子应用跳转404后者浏览器url被子应用修改，产生异常
+               *  2、keep-alive应用二次渲染时，由于setTimeout响应过慢，子应用在渲染后才接受到popstate事件，响应新的url，从而导致状态丢失
+               *  3、同一个页面多个子应用，修改地址响应
+               *  4、vue3跳转前会执行一次replace，有没有影响？
+               */
+            // }
         });
         // fix bug for nest app
         removeDomScope();
@@ -3843,7 +4245,7 @@ function reWriteHistoryMethod(method) {
 }
 /**
  * rewrite history.pushState/replaceState
- * used to fix the problem that the microAppState maybe missing when mainApp navigate to same path
+ * used to fix the problem that the __MICRO_APP_STATE__ maybe missing when mainApp navigate to same path
  * e.g: when nextjs, angular receive popstate event, they will use history.replaceState to update browser url with a new state object
  */
 function patchHistory() {
@@ -3866,7 +4268,7 @@ function createRouterApi() {
      * @param state to.state
      */
     function navigateWithRawHistory(appName, methodName, targetLocation, state) {
-        navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null));
+        navigateWithNativeEvent(appName, methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, state !== null && state !== void 0 ? state : null, targetLocation));
         // clear element scope after navigate
         removeDomScope();
     }
@@ -3884,21 +4286,13 @@ function createRouterApi() {
         const currentFullPath = microLocation.pathname + microLocation.search + microLocation.hash;
         const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
         if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
-            const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
-            navigateWithRawHistory(appName, methodName, targetLocation, to.state);
-            /**
-             * TODO:
-             *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
-             *  2. 关闭虚拟路由时跳转方式不同：1、基座跳转但不发送popstate事件 2、控制子应用更新location，内部发送popstate事件。
-             *  核心思路：减小对基座的影响(子应用跳转不向基座发送popstate事件，其他操作一致)，但这是必要的吗，只是多了一个触发popstate的操作
-             *  路由优化方案有两种：
-             *    1、减少对基座的影响，主要是解决vue循环刷新的问题
-             *    2、全局发送popstate事件，解决主、子都是vue3的冲突问题
-             *  两者选一个吧，如果选2，则下面这两行代码可以去掉
-             *  NOTE1: history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
-             *  NOTE2: 关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
-             */
-            if (isRouterModeCustom(appName)) {
+            // pure mode will not call history.pushState/replaceState
+            if (!isRouterModePure(appName)) {
+                const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
+                navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+            }
+            // only search mode will dispatch PopStateEvent to browser
+            if (!isRouterModeSearch(appName)) {
                 updateMicroLocationWithEvent(appName, targetFullPath);
             }
         }
@@ -3913,52 +4307,44 @@ function createRouterApi() {
      */
     function createNavigationMethod(replace) {
         return function (to) {
-            const appName = formatAppName(to.name);
-            if (appName && isString(to.path)) {
-                /**
-                 * active apps, exclude prerender app or hidden keep-alive app
-                 * NOTE:
-                 *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
-                 *  2. disable memory-router
-                 */
-                /**
-                 * TODO: 子应用开始渲染但是还没渲染完成
-                 *  1、调用跳转改如何处理
-                 *  2、iframe的沙箱还没初始化时执行跳转报错，如何处理。。。
-                 *  3、hidden app 是否支持跳转
-                 */
-                if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
-                    const app = appInstanceMap.get(appName);
-                    const navigateAction = () => handleNavigate(appName, app, to, replace);
-                    app.iframe ? app.sandBox.sandboxReady.then(navigateAction) : navigateAction();
+            return new Promise((resolve, reject) => {
+                const appName = formatAppName(to.name);
+                if (appName && isString(to.path)) {
+                    /**
+                     * active apps, exclude prerender app or hidden keep-alive app
+                     * NOTE:
+                     *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
+                     *  2. disable memory-router
+                     */
+                    /**
+                     * TODO:
+                     *  1、子应用开始渲染但是还没渲染完成，调用跳转改如何处理
+                     *  2、iframe的沙箱还没初始化时执行跳转报错，如何处理。。。
+                     *  3、hidden app、预渲染 app 是否支持跳转 --- 支持（这里还涉及子应用内部跳转的支持）
+                     */
+                    if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
+                        const app = appInstanceMap.get(appName);
+                        resolve(app.sandBox.sandboxReady.then(() => handleNavigate(appName, app, to, replace)));
+                    }
+                    else {
+                        reject(logError('导航失败，请确保子应用渲染后再调用此方法'));
+                    }
+                    // const rawLocation = globalEnv.rawWindow.location
+                    // const targetLocation = createURL(to.path, rawLocation.origin)
+                    // const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash
+                    // if (getMicroPathFromURL(appName) !== targetFullPath) {
+                    //   navigateWithRawHistory(
+                    //     appName,
+                    //     to.replace === false ? 'pushState' : 'replaceState',
+                    //     targetLocation,
+                    //     to.state,
+                    //   )
+                    // }
                 }
                 else {
-                    logWarn('navigation failed, app does not exist or is inactive');
+                    reject(logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`));
                 }
-                // /**
-                //  * app not exit or unmounted, update browser URL with replaceState
-                //  * use base app location.origin as baseURL
-                //  * 应用不存在或已卸载，依然使用replaceState来更新浏览器地址 -- 不合理
-                //  */
-                // /**
-                //  * TODO: 应用还没渲染或已经卸载最好不要支持跳转了，我知道这是因为解决一些特殊场景，但这么做是非常反直觉的
-                //  * 并且在新版本中有多种路由模式，如果应用不存在，我们根本无法知道是哪种模式，那么这里的操作就无意义了。
-                //  */
-                // const rawLocation = globalEnv.rawWindow.location
-                // const targetLocation = createURL(to.path, rawLocation.origin)
-                // const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash
-                // if (getMicroPathFromURL(appName) !== targetFullPath) {
-                //   navigateWithRawHistory(
-                //     appName,
-                //     to.replace === false ? 'pushState' : 'replaceState',
-                //     targetLocation,
-                //     to.state,
-                //   )
-                // }
-            }
-            else {
-                logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`);
-            }
+            });
         };
     }
     // create method of router.go/back/forward
@@ -4015,9 +4401,9 @@ function createRouterApi() {
      * 3. router mode is custom
      */
     function commonHandlerForAttachToURL(appName) {
-        if (!isRouterModeCustom(appName)) {
+        if (isRouterModeSearch(appName) || isRouterModeState(appName)) {
             const app = appInstanceMap.get(appName);
-            attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
+            attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName), app.sandBox.proxyWindow.location));
         }
     }
     /**
@@ -4116,94 +4502,6 @@ function createRouterApi() {
 }
 const { router, executeNavigationGuard, clearRouterWhenUnmount, } = createRouterApi();
 
-const escape2RawWindowKeys = [
-    'getComputedStyle',
-    'visualViewport',
-    'matchMedia',
-    // 'DOMParser',
-    'ResizeObserver',
-    'IntersectionObserver',
-];
-const escape2RawWindowRegExpKeys = [
-    /animationFrame$/i,
-    /mutationObserver$/i,
-    /height$|width$/i,
-    /offset$/i,
-    // /event$/i,
-    /selection$/i,
-    /^range/i,
-    /^screen/i,
-    /^scroll/i,
-    /X$|Y$/,
-];
-const uniqueDocumentElement = [
-    'body',
-    'head',
-    'html',
-    'title',
-];
-const hijackMicroLocationKeys = [
-    'host',
-    'hostname',
-    'port',
-    'protocol',
-    'origin',
-];
-// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (属性)
-const proxy2RawDocOrShadowKeys = [
-    'childElementCount',
-    'children',
-    'firstElementChild',
-    'firstChild',
-    'lastElementChild',
-    'activeElement',
-    'fullscreenElement',
-    'pictureInPictureElement',
-    'pointerLockElement',
-    'styleSheets',
-];
-// 有shadowRoot则代理到shadowRoot否则代理到原生document上 (方法)
-const proxy2RawDocOrShadowMethods = [
-    'append',
-    'contains',
-    'replaceChildren',
-    'createRange',
-    'getSelection',
-    'elementFromPoint',
-    'elementsFromPoint',
-    'getAnimations',
-];
-// 直接代理到原生document上 (属性)
-const proxy2RawDocumentKeys = [
-    'characterSet',
-    'compatMode',
-    'contentType',
-    'designMode',
-    'dir',
-    'doctype',
-    'embeds',
-    'fullscreenEnabled',
-    'hidden',
-    'implementation',
-    'lastModified',
-    'pictureInPictureEnabled',
-    'plugins',
-    'readyState',
-    'referrer',
-    'visibilityState',
-    'fonts',
-];
-// 直接代理到原生document上 (方法)
-const proxy2RawDocumentMethods = [
-    'execCommand',
-    'createRange',
-    'exitFullscreen',
-    'exitPictureInPicture',
-    'getElementsByTagNameNS',
-    'hasFocus',
-    'prepend',
-];
-
 // origin is readonly, so we ignore when updateMicroLocation
 const locationKeys = ['href', 'pathname', 'search', 'hash', 'host', 'hostname', 'port', 'protocol', 'search'];
 // origin, fullPath is necessary for guardLocation
@@ -4248,38 +4546,46 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
             // if disable memory-router, navigate directly through rawLocation
             if (!isRouterModeCustom(appName)) {
+                methodName = isRouterModePure(appName) ? 'replaceState' : methodName;
                 /**
                  * change hash with location.href will not trigger the browser reload
                  * so we use pushState & reload to imitate href behavior
                  * NOTE:
-                 *    1. if child app only change hash, it should not trigger browser reload
-                 *    2. if address is same and has hash, it should not add route stack
+                 *    1. if child app only change hash, it will not reload browser
+                 *    2. if address is same and has hash, it will not add route stack
                  */
                 if (targetLocation.pathname === proxyLocation.pathname &&
                     targetLocation.search === proxyLocation.search) {
                     let oldHref = null;
-                    if (targetLocation.hash !== proxyLocation.hash) {
-                        if (setMicroPathResult.isAttach2Hash)
+                    // NOTE: if pathname & search is same, it should record router info to history.state in pure mode
+                    if (targetLocation.hash !== proxyLocation.hash || isRouterModePure(appName)) {
+                        // search mode only
+                        if (setMicroPathResult.isAttach2Hash) {
                             oldHref = rawLocation.href;
-                        nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
+                        }
+                        // if router mode is pure and targetLocation.hash exist, it will not call nativeHistoryNavigate
+                        if (!isRouterModePure(appName) || !targetLocation.hash) {
+                            nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath, !isRouterModeSearch(appName) ? setMicroState(appName, null, targetLocation) : null);
+                        }
                     }
                     if (targetLocation.hash) {
-                        dispatchNativeEvent(appName, false, oldHref);
+                        if (isRouterModeSearch(appName)) {
+                            dispatchNativeEvent(appName, false, oldHref);
+                        }
+                        else {
+                            updateMicroLocationWithEvent(appName, targetLocation.pathname + targetLocation.search + targetLocation.hash);
+                        }
                     }
                     else {
                         reload();
                     }
                     return void 0;
-                    /**
-                     * when baseApp is hash router, address change of child can not reload browser
-                     * so we imitate behavior of browser (reload) manually
-                     */
-                }
-                else if (setMicroPathResult.isAttach2Hash) {
-                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                    reload();
-                    return void 0;
                 }
+                // when pathname or search change, simulate behavior of browser (reload) manually
+                // TODO: state模式下pushState会带上上一个页面的state，会不会有问题，尤其是vue3，应不应该将主应用的state设置为null
+                nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath, !isRouterModeSearch(appName) ? setMicroState(appName, null, targetLocation) : null);
+                reload();
+                return void 0;
             }
             return setMicroPathResult.fullPath;
         }
@@ -4304,7 +4610,9 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
              * pathname: /path ==> /path#hash, /path ==> /path?query
              * search: ?query ==> ?query#hash
              */
-            nativeHistoryNavigate(appName, targetLocation[key] === proxyLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
+            nativeHistoryNavigate(appName, (targetLocation[key] === proxyLocation[key] || isRouterModePure(appName))
+                ? 'replaceState'
+                : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath, !isRouterModeSearch(appName) ? setMicroState(appName, null, targetLocation) : null);
             reload();
         }
     }
@@ -4333,16 +4641,6 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
     const proxyLocation = new Proxy({}, {
         get: (_, key) => {
             const target = getTarget();
-            if (isIframe) {
-                // host hostname port protocol
-                if (hijackMicroLocationKeys.includes(key)) {
-                    return childStaticLocation[key];
-                }
-                if (key === 'href') {
-                    // do not use target, because target may be deleted
-                    return target[key].replace(browserHost, childHost);
-                }
-            }
             if (key === 'assign')
                 return assign;
             if (key === 'replace')
@@ -4351,21 +4649,47 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                 return reload;
             if (key === 'self')
                 return target;
+            if (key === 'fullPath')
+                return target.fullPath;
+            /**
+             * Special keys: host, hostname, port, protocol, origin, href
+             * NOTE:
+             *  1. In native mode this keys point to browser, in other mode this keys point to child app origin
+             *  2. In iframe sandbox, iframe.src is base app address, so origin points to the browser by default, we need to replace it with child app origin
+             *  3. In other modes, origin points to child app
+             */
+            if (HIJACK_LOCATION_KEYS.includes(key)) {
+                if (isRouterModeNative(appName)) {
+                    return rawLocation[key];
+                }
+                if (isIframe) {
+                    return childStaticLocation[key];
+                }
+            }
+            if (key === 'href') {
+                if (isRouterModeNative(appName)) {
+                    return target[key].replace(target.origin, rawLocation.origin);
+                }
+                if (isIframe) {
+                    // target may be deleted
+                    return target[key].replace(browserHost, childHost);
+                }
+            }
             return bindFunctionToRawTarget(Reflect.get(target, key), target, 'LOCATION');
         },
         set: (_, key, value) => {
             if (isEffectiveApp(appName)) {
                 const target = getTarget();
                 if (key === 'href') {
-                    const targetPath = commonHandler(value, 'pushState');
                     /**
                      * In vite, targetPath without origin will be completed with child origin
                      * So we use browser origin to complete targetPath to avoid this problem
-                     * But, why child app can affect browser jump?
-                     * Guess(need check):
-                     *  1. vite records the origin when init
-                     *  2. listen for browser jump and automatically complete the address
+                     * NOTE:
+                     *  1. history mode & value is childOrigin + path ==> jump to browserOrigin + path
+                     *  2. disable mode & value is childOrigin + path ==> jump to childOrigin + path
+                     *  3. search mode & value is browserOrigin + path ==> jump to browserOrigin + path
                      */
+                    const targetPath = commonHandler(value, 'pushState');
                     if (targetPath) {
                         rawLocation.href = createURL(targetPath, rawLocation.origin).href;
                     }
@@ -4397,7 +4721,12 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                         const targetLocation = createURL(targetPath, url);
                         // The same hash will not trigger popStateEvent
                         if (targetLocation.hash !== proxyLocation.hash) {
-                            navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                            if (!isRouterModePure(appName)) {
+                                navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, null, targetLocation));
+                            }
+                            if (!isRouterModeSearch(appName)) {
+                                updateMicroLocationWithEvent(appName, targetLocation.pathname + targetLocation.search + targetLocation.hash);
+                            }
                         }
                     }
                 }
@@ -4439,20 +4768,36 @@ function autoTriggerNavigationGuard(appName, microLocation) {
  * @param microLocation micro app location
  * @param type auto prevent
  */
-function updateMicroLocation(appName, path, microLocation, type) {
+function updateMicroLocation(appName, targetFullPath, microLocation, type) {
     var _a;
     // record old values of microLocation to `from`
     const from = createGuardLocation(appName, microLocation);
     // if is iframeSandbox, microLocation muse be rawLocation of iframe, not proxyLocation
-    const newLocation = createURL(path, microLocation.href);
+    const newLocation = createURL(targetFullPath, microLocation.href);
     if (isIframeSandbox(appName)) {
         const microAppWindow = appInstanceMap.get(appName).sandBox.microAppWindow;
         (_a = microAppWindow.rawReplaceState) === null || _a === void 0 ? void 0 : _a.call(microAppWindow.history, getMicroState(appName), '', newLocation.href);
     }
     else {
-        for (const key of locationKeys) {
-            microLocation.self[key] = newLocation[key];
+        let targetHref = newLocation.href;
+        if (microLocation.self.origin !== newLocation.origin) {
+            targetHref = targetHref.replace(newLocation.origin, microLocation.self.origin);
         }
+        microLocation.self.href = targetHref;
+    }
+    /**
+     * The native mode also base of history.state, and the modification of the browser url cannot be controlled. It is very likely that the browser url and __MICRO_APP_STATE__ are different.
+     * Especially during init of child or forward and backward of browser, because vue-router@4 will actively modify the browser URL, the above situation often occurs
+     * To solve this problem, after child app is initialized and responds to the popstateEvent, it is determined whether __MICRO_APP_STATE__ and the browser url are different. If they are different, the browser url will updated to the address of __MICRO_APP_STATE__
+     * NOTE:
+     *  1. If __MICRO_APP_STATE__ is different from the URL, then the operation of updating the URL is correct, otherwise there will be a problem of inconsistency between the URL and the rendered page
+     *  2. When there are multiple child app in native mode, if one of them changes the URL address, the other one will not change __MICRO_APP_STATE__, and refresh browser will cause problems
+     */
+    const rawLocation = globalEnv.rawWindow.location;
+    if (isRouterModeCustom(appName) &&
+        (targetFullPath !== rawLocation.pathname + rawLocation.search + rawLocation.hash) &&
+        type !== 'prevent') {
+        nativeHistoryNavigate(appName, 'replaceState', targetFullPath, globalEnv.rawWindow.history.state);
     }
     // update latest values of microLocation to `to`
     const to = createGuardLocation(appName, microLocation);
@@ -4462,15 +4807,6 @@ function updateMicroLocation(appName, path, microLocation, type) {
     }
 }
 
-/**
- * TODO: 关于关闭虚拟路由系统的临时笔记 - 即custom模式，虚拟路由不支持关闭
- * 1. with沙箱关闭虚拟路由最好和iframe保持一致
- * 2. default-page无法使用，但是用基座的地址可以实现一样的效果
- * 3. keep-router-state功能失效，因为始终为true
- * 4. 基座控制子应用跳转地址改变，正确的值为：baseRoute + 子应用地址，这要在文档中说明，否则很容易出错，确实也很难理解
- * 5. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
- * 6. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
- */
 /**
  * The router system has two operations: read and write
  * Read through location and write through history & location
@@ -4495,6 +4831,9 @@ function initRouteStateWithURL(appName, microLocation, defaultPage) {
     const microPath = getMicroPathFromURL(appName);
     if (microPath) {
         updateMicroLocation(appName, microPath, microLocation, 'auto');
+        if (isRouterModePure(appName)) {
+            removePathFromBrowser(appName);
+        }
     }
     else {
         updateBrowserURLWithLocation(appName, microLocation, defaultPage);
@@ -4510,8 +4849,10 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     // update microLocation with defaultPage
     if (defaultPage)
         updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
-    // attach microApp route info to browser URL
-    attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null));
+    if (!isRouterModePure(appName)) {
+        // attach microApp route info to browser URL
+        attachRouteToBrowserURL(appName, setMicroPathToURL(appName, microLocation), setMicroState(appName, null, microLocation));
+    }
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -4523,11 +4864,12 @@ function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
  * @param keepRouteState keep-router-state is only used to control whether to clear the location of microApp, default is false
  */
 function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
-    if (!isRouterModeCustom(appName)) {
-        if (!keepRouteState) {
-            const { pathname, search, hash } = createURL(url);
-            updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
-        }
+    // TODO: keep-router-state 功能太弱，是否可以增加优先级，或者去掉
+    if (!keepRouteState && !isRouterModeCustom(appName)) {
+        const { pathname, search, hash } = createURL(url);
+        updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
+    }
+    if (!isRouterModePure(appName)) {
         removePathFromBrowser(appName);
     }
     clearRouterWhenUnmount(appName);
@@ -4642,32 +4984,26 @@ function useMicroEventSource() {
 }
 
 const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
-class WithSandBox {
+class WithSandBox extends BaseSandbox {
     constructor(appName, url) {
+        super(appName, url);
         this.active = false;
-        /**
-         * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-         * Fix https://github.com/micro-zoe/micro-app/issues/234
-         */
-        this.scopeProperties = [];
-        // Properties that can be escape to rawWindow
-        this.escapeProperties = [];
-        // Properties escape to rawWindow, cleared when unmount
-        this.escapeKeys = new Set();
-        // Properties newly added to microAppWindow
-        this.injectedKeys = new Set();
-        this.microAppWindow = new EventTarget(); // Proxy target
-        this.adapter = new Adapter();
-        // get scopeProperties and escapeProperties from plugins
-        this.getSpecialProperties(appName);
-        // create location, history for child app
-        this.patchRouter(appName, url, this.microAppWindow);
-        // patch window of child app
-        this.windowEffect = patchWindow(appName, this.microAppWindow, this);
-        // patch document of child app
-        this.documentEffect = patchDocument(appName, this.microAppWindow, this);
-        // inject global properties
-        this.initStaticGlobalKeys(appName, url, this.microAppWindow);
+        this.microAppWindow = new CustomWindow(); // Proxy target
+        this.patchWith((resolve) => {
+            // get scopeProperties and escapeProperties from plugins
+            this.getSpecialProperties(appName);
+            // create location, history for child app
+            this.patchRouter(appName, url, this.microAppWindow);
+            // patch window of child app
+            this.windowEffect = patchWindow(appName, this.microAppWindow, this);
+            // patch document of child app
+            this.documentEffect = patchDocument(appName, this.microAppWindow, this);
+            // properties associated with the native window
+            this.setMappingPropertiesWithRawDescriptor(this.microAppWindow);
+            // inject global properties
+            this.initStaticGlobalKeys(appName, url, this.microAppWindow);
+            resolve();
+        });
     }
     /**
      * open sandbox and perform some initial actions
@@ -4685,7 +5021,9 @@ class WithSandBox {
         this.initRouteState(defaultPage);
         // unique listener of popstate event for sub app
         this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        if (isRouterModeCustom(this.microAppWindow.__MICRO_APP_NAME__)) {
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        }
         /* --- memory router part --- end */
         /**
          * Target: Ensure default mode action exactly same to first time when render again
@@ -4729,6 +5067,7 @@ class WithSandBox {
          *  1. injectedKeys and escapeKeys must be placed at the back
          *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
          *  3. umd mode will not delete global keys
+         *  4. mount & unmount hook should delete in default mode when stop
          */
         if (!umdMode || destroy) {
             clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
@@ -4740,6 +5079,7 @@ class WithSandBox {
                 Reflect.deleteProperty(globalEnv.rawWindow, key);
             });
             this.escapeKeys.clear();
+            this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
             releasePatchElementAndDocument();
@@ -4750,6 +5090,7 @@ class WithSandBox {
     }
     /**
      * inject global properties to microAppWindow
+     * TODO: 设置为只读变量
      * @param appName app name
      * @param url app url
      * @param microAppWindow micro window
@@ -4763,6 +5104,7 @@ class WithSandBox {
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
         microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
         microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
         microAppWindow.__MICRO_APP_SANDBOX__ = this;
         microAppWindow.__MICRO_APP_SANDBOX_TYPE__ = 'with';
         microAppWindow.rawWindow = globalEnv.rawWindow;
@@ -4770,9 +5112,9 @@ class WithSandBox {
         microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
+            location: microAppWindow.location,
             router,
         });
-        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
     }
     /**
      * Record global effect and then release (effect: global event, timeout, data listener)
@@ -4855,7 +5197,6 @@ class WithSandBox {
      */
     getSpecialProperties(appName) {
         var _a;
-        this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
         if (isPlainObject(microApp.options.plugins)) {
             this.commonActionForSpecialProperties(microApp.options.plugins.global);
             this.commonActionForSpecialProperties((_a = microApp.options.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
@@ -4883,6 +5224,9 @@ class WithSandBox {
     markUmdMode(state) {
         this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
     }
+    patchWith(cb) {
+        this.sandboxReady = new Promise((resolve) => cb(resolve));
+    }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
         let topValue, parentValue;
@@ -4894,9 +5238,10 @@ class WithSandBox {
             topValue = rawWindow.top;
             parentValue = rawWindow.parent;
         }
-        // TODO: 用rawDefineProperties
-        rawDefineProperty(microAppWindow, 'top', this.createDescriptorForMicroAppWindow('top', topValue));
-        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorForMicroAppWindow('parent', parentValue));
+        rawDefineProperties(microAppWindow, {
+            top: this.createDescriptorForMicroAppWindow('top', topValue),
+            parent: this.createDescriptorForMicroAppWindow('parent', parentValue),
+        });
         GLOBAL_KEY_TO_WINDOW.forEach((key) => {
             rawDefineProperty(microAppWindow, key, this.createDescriptorForMicroAppWindow(key, this.proxyWindow));
         });
@@ -4934,7 +5279,7 @@ class WithSandBox {
                 enumerable: false,
                 get() {
                     throttleDeferForSetAppName(appName);
-                    return modifiedEval || eval;
+                    return modifiedEval || globalEnv.rawWindow.eval;
                 },
                 set: (value) => {
                     modifiedEval = value;
@@ -5049,22 +5394,80 @@ class WithSandBox {
      * action before exec scripts when mount
      * Actions:
      * 1. patch static elements from html
+     * 2. hijack umd hooks -- mount, unmount, micro-app-appName
      * @param container micro app container
      */
-    actionBeforeExecScripts(container) {
+    actionsBeforeExecScripts(container, handleUmdHooks) {
         this.patchStaticElement(container);
+        this.clearHijackUmdHooks = this.hijackUmdHooks(this.appName, this.microAppWindow, handleUmdHooks);
+    }
+    // hijack mount, unmount, micro-app-appName hook to microAppWindow
+    hijackUmdHooks(appName, microAppWindow, handleUmdHooks) {
+        let mount, unmount, microAppLibrary;
+        rawDefineProperties(microAppWindow, {
+            mount: {
+                configurable: true,
+                get: () => mount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !mount) {
+                        handleUmdHooks(mount = value, unmount);
+                    }
+                }
+            },
+            unmount: {
+                configurable: true,
+                get: () => unmount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !unmount) {
+                        handleUmdHooks(mount, unmount = value);
+                    }
+                }
+            },
+            [`micro-app-${appName}`]: {
+                configurable: true,
+                get: () => microAppLibrary,
+                set: (value) => {
+                    if (this.active && isPlainObject(value) && !microAppLibrary) {
+                        microAppLibrary = value;
+                        handleUmdHooks(microAppLibrary.mount, microAppLibrary.unmount);
+                    }
+                }
+            }
+        });
+        return () => {
+            mount = unmount = microAppLibrary = null;
+        };
+    }
+    setStaticAppState(state) {
+        this.microAppWindow.__MICRO_APP_STATE__ = state;
     }
 }
 WithSandBox.activeCount = 0; // number of active sandbox
 
 function patchRouter(appName, url, microAppWindow, browserHost) {
-    const childStaticLocation = new URL(url);
+    const rawHistory = globalEnv.rawWindow.history;
+    const childStaticLocation = createURL(url);
     const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
     const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
     // rewrite microAppWindow.history
     const microHistory = microAppWindow.history;
+    // save history.replaceState, it will be used in updateMicroLocation
     microAppWindow.rawReplaceState = microHistory.replaceState;
+    // rewrite microAppWindow.history
     assign(microHistory, createMicroHistory(appName, microAppWindow.location));
+    // scrollRestoration proxy to rawHistory
+    rawDefineProperties(microHistory, {
+        scrollRestoration: {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return rawHistory.scrollRestoration;
+            },
+            set(value) {
+                rawHistory.scrollRestoration = value;
+            }
+        }
+    });
     /**
      * Init microLocation before exec sandbox.start
      * NOTE:
@@ -5076,6 +5479,149 @@ function patchRouter(appName, url, microAppWindow, browserHost) {
     return createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost);
 }
 
+const escape2RawWindowKeys = [
+    'getComputedStyle',
+    // FIX ISSUE: https://github.com/micro-zoe/micro-app/issues/1292
+    'DOMParser',
+    'visualViewport',
+    'matchMedia',
+    'ResizeObserver',
+    'IntersectionObserver',
+];
+const escape2RawWindowRegExpKeys = [
+    /animationFrame$/i,
+    /mutationObserver$/i,
+    /height$|width$/i,
+    /offset$/i,
+    /selection$/i,
+    /^range/i,
+    /^screen/i,
+    /^scroll/i,
+    /X$|Y$/,
+];
+const uniqueDocumentElement = [
+    'body',
+    'head',
+    'html',
+    'title',
+];
+// proxy to shadowRoot or rawDocument (property)
+const proxy2RawDocOrShadowKeys = [
+    'childElementCount',
+    'children',
+    'firstElementChild',
+    'firstChild',
+    'lastElementChild',
+    'activeElement',
+    'fullscreenElement',
+    'pictureInPictureElement',
+    'pointerLockElement',
+    'styleSheets',
+];
+// proxy to shadowRoot or rawDocument (method)
+const proxy2RawDocOrShadowMethods = [
+    'append',
+    'contains',
+    'replaceChildren',
+    'createRange',
+    'getSelection',
+    'elementFromPoint',
+    'elementsFromPoint',
+    'getAnimations',
+];
+// proxy to rawDocument (property)
+const proxy2RawDocumentKeys = [
+    'characterSet',
+    'compatMode',
+    'contentType',
+    'designMode',
+    'dir',
+    'doctype',
+    'embeds',
+    'fullscreenEnabled',
+    'hidden',
+    'implementation',
+    'lastModified',
+    'pictureInPictureEnabled',
+    'plugins',
+    'readyState',
+    'referrer',
+    'visibilityState',
+    'fonts',
+];
+// proxy to rawDocument (method)
+const proxy2RawDocumentMethods = [
+    'execCommand',
+    'createRange',
+    'exitFullscreen',
+    'exitPictureInPicture',
+    'getElementsByTagNameNS',
+    'hasFocus',
+    'prepend',
+];
+
+// 重写 Worker 构造函数的类型
+const originalWorker = window.Worker;
+function isSameOrigin(url) {
+    if (url instanceof URL && url.protocol === 'blob:') {
+        // 如果 url 是 Blob URL，直接返回 true
+        return true;
+    }
+    // 检查 URL 是否与当前页面在同一个源
+    try {
+        const parsedUrl = new URL(url);
+        return (parsedUrl.protocol === window.location.protocol &&
+            parsedUrl.hostname === window.location.hostname &&
+            parsedUrl.port === window.location.port);
+    }
+    catch (error) {
+        return false;
+    }
+}
+function urlFromScript(script) {
+    let blob;
+    try {
+        blob = new Blob([script], {
+            type: 'application/javascript'
+        });
+    }
+    catch (e) {
+        const BlobBuilder = 
+        // @ts-ignore
+        window.BlobBuilder ||
+            // @ts-ignore
+            window.WebKitBlobBuilder ||
+            // @ts-ignore
+            window.MozBlobBuilder ||
+            // @ts-ignore
+            window.MSBlobBuilder;
+        const blobBuilder = new BlobBuilder();
+        blobBuilder.append(script);
+        blob = blobBuilder.getBlob('application/javascript');
+    }
+    const URL = window.URL || window.webkitURL;
+    return URL.createObjectURL(blob);
+}
+// @ts-ignore
+const WorkerProxy = new Proxy(originalWorker, {
+    construct(Target, args) {
+        const [scriptURL, options] = args;
+        if (!isSameOrigin(scriptURL)) {
+            // 如果 scriptURL 是跨域的，使用 Blob URL 加载并执行 worker
+            const script = `import "${scriptURL}";`;
+            const workerPath = urlFromScript(script);
+            options.type = 'module';
+            return new Target(workerPath, options);
+        }
+        else {
+            // 如果 scriptURL 是同源的，直接使用原生的 Worker 构造函数
+            return new Target(scriptURL, options);
+        }
+    },
+});
+// @ts-ignore
+window.Worker = WorkerProxy;
+
 /**
  * patch window of child app
  * @param appName app name
@@ -5084,7 +5630,7 @@ function patchRouter(appName, url, microAppWindow, browserHost) {
  * @returns EffectHook
  */
 function patchWindow$1(appName, microAppWindow, sandbox) {
-    patchWindowProperty$1(appName, microAppWindow);
+    patchWindowProperty$1(appName, microAppWindow, sandbox);
     createProxyWindow$1(microAppWindow, sandbox);
     return patchWindowEffect$1(microAppWindow);
 }
@@ -5093,7 +5639,7 @@ function patchWindow$1(appName, microAppWindow, sandbox) {
  * @param appName app name
  * @param microAppWindow child app microWindow
  */
-function patchWindowProperty$1(appName, microAppWindow) {
+function patchWindowProperty$1(appName, microAppWindow, sandbox) {
     const rawWindow = globalEnv.rawWindow;
     escape2RawWindowKeys.forEach((key) => {
         microAppWindow[key] = bindFunctionToRawTarget(rawWindow[key], rawWindow);
@@ -5123,7 +5669,26 @@ function patchWindowProperty$1(appName, microAppWindow) {
             }
             return false;
         });
-        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT.includes(key);
+        /**
+         * In FireFox, iframe Element.prototype will point to native Element.prototype after insert to document
+         * Rewrite all constructor's Symbol.hasInstance of iframeWindow
+         * NOTE:
+         *  1. native event instanceof iframe window.Event
+         *  2. native node instanceof iframe window.Node
+         *  3. native element instanceof iframe window.Element
+         *  4. native url instanceof iframe window.URL
+         *  ...
+         */
+        if (isConstructor(microAppWindow[key]) && key in rawWindow) {
+            rawDefineProperty(microAppWindow[key], Symbol.hasInstance, {
+                configurable: true,
+                enumerable: false,
+                value(target) {
+                    return instanceOf(target, rawWindow[key]) || instanceOf(target, microAppWindow[key]);
+                },
+            });
+        }
+        return /^on/.test(key) && !SCOPE_WINDOW_ON_EVENT_OF_IFRAME.includes(key);
     })
         .forEach((eventName) => {
         const { enumerable, writable, set } = Object.getOwnPropertyDescriptor(microAppWindow, eventName) || {
@@ -5143,6 +5708,23 @@ function patchWindowProperty$1(appName, microAppWindow) {
             logWarn(e, appName);
         }
     });
+    /**
+     * In esmodule(vite) proxyWindow will not take effect,
+     * escapeProperties should define to microAppWindow
+     */
+    sandbox.escapeProperties.forEach((key) => {
+        let rawValue = microAppWindow[key];
+        rawDefineProperty(microAppWindow, key, {
+            enumerable: true,
+            configurable: true,
+            get() {
+                return rawValue !== null && rawValue !== void 0 ? rawValue : bindFunctionToRawTarget(rawWindow[key], rawWindow);
+            },
+            set(value) {
+                rawValue = value;
+            }
+        });
+    });
 }
 /**
  * create proxyWindow with Proxy(microAppWindow)
@@ -5151,18 +5733,43 @@ function patchWindowProperty$1(appName, microAppWindow) {
  */
 function createProxyWindow$1(microAppWindow, sandbox) {
     const rawWindow = globalEnv.rawWindow;
-    const customProperties = [];
+    const customProperties = new Set();
+    Object.defineProperty(microAppWindow, 'Worker', {
+        value: WorkerProxy,
+        configurable: true,
+        writable: true,
+    });
+    /**
+     * proxyWindow will only take effect in certain scenes, such as window.key
+     * e.g:
+     *  1. window.key in normal app --> fall into proxyWindow
+     *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow)
+     *  3. if (key)... --> fall into microAppWindow(iframeWindow)
+     */
     const proxyWindow = new Proxy(microAppWindow, {
         get: (target, key) => {
+            if (key === 'Worker') {
+                return WorkerProxy;
+            }
             if (key === 'location') {
                 return sandbox.proxyLocation;
             }
-            if (GLOBAL_KEY_TO_WINDOW.includes(key.toString())) {
+            if (includes(GLOBAL_KEY_TO_WINDOW, key)) {
                 return proxyWindow;
             }
-            if (customProperties.includes(key)) {
+            if (customProperties.has(key)) {
                 return Reflect.get(target, key);
             }
+            /**
+             * Same as proxyWindow, escapeProperties will only take effect in certain scenes
+             * e.g:
+             *  1. window.key in normal app --> fall into proxyWindow, escapeProperties will effect
+             *  2. window.key in module app(vite), fall into microAppWindow(iframeWindow), escapeProperties will not take effect
+             *  3. if (key)... --> fall into microAppWindow(iframeWindow), escapeProperties will not take effect
+             */
+            if (includes(sandbox.escapeProperties, key) && !Reflect.get(target, key)) {
+                return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
+            }
             return bindFunctionToRawTarget(Reflect.get(target, key), target);
         },
         set: (target, key, value) => {
@@ -5170,19 +5777,15 @@ function createProxyWindow$1(microAppWindow, sandbox) {
                 return Reflect.set(rawWindow, key, value);
             }
             if (!Reflect.has(target, key)) {
-                customProperties.push(key);
+                customProperties.add(key);
             }
+            // sandbox.escapeProperties will not set to rawWindow from rc.9
             Reflect.set(target, key, value);
-            if (sandbox.escapeProperties.includes(key)) {
-                !Reflect.has(rawWindow, key) && sandbox.escapeKeys.add(key);
-                Reflect.set(rawWindow, key, value);
-            }
             return true;
         },
         has: (target, key) => key in target,
         deleteProperty: (target, key) => {
             if (Reflect.has(target, key)) {
-                sandbox.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
                 return Reflect.deleteProperty(target, key);
             }
             return true;
@@ -5191,11 +5794,15 @@ function createProxyWindow$1(microAppWindow, sandbox) {
     sandbox.proxyWindow = proxyWindow;
 }
 function patchWindowEffect$1(microAppWindow) {
-    const { rawWindow, rawAddEventListener, rawRemoveEventListener } = globalEnv;
+    const { rawWindow, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent } = globalEnv;
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     function getEventTarget(type) {
-        return SCOPE_WINDOW_EVENT.includes(type) ? microAppWindow : rawWindow;
+        /**
+         * TODO: SCOPE_WINDOW_EVENT_OF_IFRAME的事件非常少，有可能导致问题
+         *  1、一些未知的需要绑定到iframe的事件被错误的绑定到原生window上
+         */
+        return SCOPE_WINDOW_EVENT_OF_IFRAME.includes(type) ? microAppWindow : rawWindow;
     }
     // TODO: listener 是否需要绑定microAppWindow，否则函数中的this指向原生window
     microAppWindow.addEventListener = function (type, listener, options) {
@@ -5216,6 +5823,9 @@ function patchWindowEffect$1(microAppWindow) {
         }
         rawRemoveEventListener.call(getEventTarget(type), type, listener, options);
     };
+    microAppWindow.dispatchEvent = function (event) {
+        return rawDispatchEvent.call(getEventTarget(event === null || event === void 0 ? void 0 : event.type), event);
+    };
     const reset = () => {
         sstEventListenerMap.clear();
     };
@@ -5288,7 +5898,9 @@ function patchDocumentPrototype(appName, microAppWindow) {
     const microRootDocument = microAppWindow.Document;
     const microDocument = microAppWindow.document;
     const rawMicroCreateElement = microRootDocument.prototype.createElement;
+    const rawMicroCreateElementNS = microRootDocument.prototype.createElementNS;
     const rawMicroCreateTextNode = microRootDocument.prototype.createTextNode;
+    const rawMicroCreateDocumentFragment = microRootDocument.prototype.createDocumentFragment;
     const rawMicroCreateComment = microRootDocument.prototype.createComment;
     const rawMicroQuerySelector = microRootDocument.prototype.querySelector;
     const rawMicroQuerySelectorAll = microRootDocument.prototype.querySelectorAll;
@@ -5309,42 +5921,71 @@ function patchDocumentPrototype(appName, microAppWindow) {
         const element = rawMicroCreateElement.call(this, tagName, options);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createElementNS = function createElementNS(namespaceURI, name, options) {
+        const element = rawMicroCreateElementNS.call(this, namespaceURI, name, options);
+        return updateElementInfo(element, appName);
+    };
     microRootDocument.prototype.createTextNode = function createTextNode(data) {
         const element = rawMicroCreateTextNode.call(this, data);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = rawMicroCreateDocumentFragment.call(this);
+        return updateElementInfo(element, appName);
+    };
     microRootDocument.prototype.createComment = function createComment(data) {
         const element = rawMicroCreateComment.call(this, data);
         return updateElementInfo(element, appName);
     };
-    function getDefaultRawTarget(target) {
-        return microDocument !== target ? target : rawDocument;
+    function getBindTarget(target) {
+        /**
+         * handler for:
+         *  1. document.getElementsByTagName('head')[0].querySelector('script')
+         *  2. document.querySelector('body').querySelectorAll('script')
+         *  ...
+         */
+        throttleDeferForIframeAppName(appName);
+        // DOMParser.document !== microDocument
+        return microDocument === target ? rawDocument : target;
     }
     // query element👇
     function querySelector(selectors) {
-        var _a, _b;
+        var _a;
+        const _this = getBindTarget(this);
         if (!selectors ||
             isUniqueElement(selectors) ||
-            microDocument !== this) {
-            const _this = getDefaultRawTarget(this);
+            rawDocument !== _this) {
             return rawMicroQuerySelector.call(_this, selectors);
         }
-        return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : null;
+        /**
+         * The child app cannot query the base element inside iframe
+         * Same for querySelectorAll
+         *
+         * Scenes:
+         *  1. vue-router@4.x --> createWebHistory(base?: string)
+         *    const baseEl = document.querySelector('base')
+         *    base = (baseEl && baseEl.getAttribute('href')) || '/'
+         *
+         * Issue: https://github.com/micro-zoe/micro-app/issues/1335
+         */
+        const result = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
+        return result || selectors === 'base' ? result : rawMicroQuerySelector.call(microDocument, selectors);
     }
     function querySelectorAll(selectors) {
         var _a, _b;
+        const _this = getBindTarget(this);
         if (!selectors ||
             isUniqueElement(selectors) ||
-            microDocument !== this) {
-            const _this = getDefaultRawTarget(this);
+            rawDocument !== _this) {
             return rawMicroQuerySelectorAll.call(_this, selectors);
         }
-        return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
+        const result = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
+        return result.length || selectors === 'base' ? result : rawMicroQuerySelectorAll.call(microDocument, selectors);
     }
     microRootDocument.prototype.querySelector = querySelector;
     microRootDocument.prototype.querySelectorAll = querySelectorAll;
     microRootDocument.prototype.getElementById = function getElementById(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementById.call(_this, key);
         }
@@ -5356,7 +5997,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
         }
     };
     microRootDocument.prototype.getElementsByClassName = function getElementsByClassName(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByClassName.call(_this, key);
         }
@@ -5368,22 +6009,24 @@ function patchDocumentPrototype(appName, microAppWindow) {
         }
     };
     microRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
-        var _a;
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isUniqueElement(key) ||
-            isInvalidQuerySelectorKey(key) ||
-            (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
+            isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByTagName.call(_this, key);
+            // just script, not base
+        }
+        else if (/^script$/i.test(key)) {
+            return rawMicroGetElementsByTagName.call(microDocument, key);
         }
         try {
             return querySelectorAll.call(this, key);
         }
-        catch (_b) {
+        catch (_a) {
             return rawMicroGetElementsByTagName.call(_this, key);
         }
     };
     microRootDocument.prototype.getElementsByName = function getElementsByName(key) {
-        const _this = getDefaultRawTarget(this);
+        const _this = getBindTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
             return rawMicroGetElementsByName.call(_this, key);
         }
@@ -5412,6 +6055,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
     const createDescriptors = () => {
         const result = {};
         const descList = [
+            // if disable-memory-router or router-mode='disable', href point to base app
             ['documentURI', () => sandbox.proxyLocation.href],
             ['URL', () => sandbox.proxyLocation.href],
             ['documentElement', () => rawDocument.documentElement],
@@ -5421,6 +6065,7 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
             ['links', () => microRootDocument.prototype.querySelectorAll.call(microDocument, 'a')],
             // unique keys of micro-app
             ['microAppElement', () => { var _a; return (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container; }],
+            ['__MICRO_APP_NAME__', () => appName],
         ];
         descList.forEach((desc) => {
             result[desc[0]] = getCommonDescriptor(desc[0], desc[1]);
@@ -5447,13 +6092,16 @@ function patchDocumentProperty(appName, microAppWindow, sandbox) {
         rawDefineProperty(microDocument, tagName, {
             enumerable: true,
             configurable: true,
-            get: () => rawDocument[tagName],
+            get: () => {
+                throttleDeferForIframeAppName(appName);
+                return rawDocument[tagName];
+            },
             set: (value) => { rawDocument[tagName] = value; },
         });
     });
 }
 function patchDocumentEffect(appName, microAppWindow) {
-    const { rawDocument, rawAddEventListener, rawRemoveEventListener } = globalEnv;
+    const { rawDocument, rawAddEventListener, rawRemoveEventListener, rawDispatchEvent } = globalEnv;
     const eventListenerMap = new Map();
     const sstEventListenerMap = new Map();
     let onClickHandler = null;
@@ -5483,6 +6131,9 @@ function patchDocumentEffect(appName, microAppWindow) {
         const handler = (listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_BOUND_FUNCTION__) || listener;
         rawRemoveEventListener.call(getEventTarget(type, this), type, handler, options);
     };
+    microRootDocument.prototype.dispatchEvent = function (event) {
+        return rawDispatchEvent.call(getEventTarget(event === null || event === void 0 ? void 0 : event.type, this), event);
+    };
     // 重新定义microRootDocument.prototype 上的on开头方法
     function createSetterHandler(eventName) {
         if (eventName === 'onclick') {
@@ -5603,12 +6254,18 @@ function patchElement(appName, url, microAppWindow, sandbox) {
     patchIframeNode(appName, microAppWindow, sandbox);
     patchIframeAttribute(url, microAppWindow);
 }
+/**
+ * patch iframe Node/Element
+ *
+ */
 function patchIframeNode(appName, microAppWindow, sandbox) {
     const rawRootElement = globalEnv.rawRootElement; // native root Element
+    const rawRootNode = globalEnv.rawRootNode;
     const rawDocument = globalEnv.rawDocument;
     const microDocument = microAppWindow.document;
     const microRootNode = microAppWindow.Node;
     const microRootElement = microAppWindow.Element;
+    const microDocumentFragment = microAppWindow.DocumentFragment;
     // const rawMicroGetRootNode = microRootNode.prototype.getRootNode
     const rawMicroAppendChild = microRootNode.prototype.appendChild;
     const rawMicroInsertBefore = microRootNode.prototype.insertBefore;
@@ -5616,10 +6273,13 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
     const rawMicroRemoveChild = microRootNode.prototype.removeChild;
     const rawMicroAppend = microRootElement.prototype.append;
     const rawMicroPrepend = microRootElement.prototype.prepend;
+    const rawMicroFragmentAppend = microDocumentFragment.prototype.append;
+    const rawMicroFragmentPrepend = microDocumentFragment.prototype.prepend;
     const rawMicroInsertAdjacentElement = microRootElement.prototype.insertAdjacentElement;
     const rawMicroCloneNode = microRootNode.prototype.cloneNode;
     const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(microRootElement.prototype, 'innerHTML');
-    const rawParentNodeLDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'parentNode');
+    const rawParentNodeDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'parentNode');
+    const rawOwnerDocumentDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'ownerDocument');
     const isPureNode = (target) => {
         return (isScriptElement(target) || isBaseElement(target)) && target.__PURE_ELEMENT__;
     };
@@ -5632,41 +6292,34 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         }
         return parent;
     };
-    microRootNode.prototype.getRootNode = function getRootNode() {
-        return microDocument;
-        // TODO: 什么情况下返回原生document?
-        // const rootNode = rawMicroGetRootNode.call(this, options)
-        // if (rootNode === appInstanceMap.get(appName)?.container) return microDocument
-        // return rootNode
-    };
     microRootNode.prototype.appendChild = function appendChild(node) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroAppendChild.call(this, node);
         }
-        return rawRootElement.prototype.appendChild.call(getRawTarget(this), node);
+        return rawRootNode.prototype.appendChild.call(getRawTarget(this), node);
     };
     microRootNode.prototype.insertBefore = function insertBefore(node, child) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroInsertBefore.call(this, node, child);
         }
-        return rawRootElement.prototype.insertBefore.call(getRawTarget(this), node, child);
+        return rawRootNode.prototype.insertBefore.call(getRawTarget(this), node, child);
     };
     microRootNode.prototype.replaceChild = function replaceChild(node, child) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroReplaceChild.call(this, node, child);
         }
-        return rawRootElement.prototype.replaceChild.call(getRawTarget(this), node, child);
+        return rawRootNode.prototype.replaceChild.call(getRawTarget(this), node, child);
     };
     microRootNode.prototype.removeChild = function removeChild(oldChild) {
         if (isPureNode(oldChild) || this.contains(oldChild)) {
             return rawMicroRemoveChild.call(this, oldChild);
         }
-        return rawRootElement.prototype.removeChild.call(getRawTarget(this), oldChild);
+        return rawRootNode.prototype.removeChild.call(getRawTarget(this), oldChild);
     };
-    microRootElement.prototype.append = function append(...nodes) {
+    microDocumentFragment.prototype.append = microRootElement.prototype.append = function append(...nodes) {
         let i = 0;
         let hasPureNode = false;
         while (i < nodes.length) {
@@ -5676,11 +6329,11 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
             i++;
         }
         if (hasPureNode) {
-            return rawMicroAppend.call(this, ...nodes);
+            return (isDocumentFragment(this) ? rawMicroFragmentAppend : rawMicroAppend).call(this, ...nodes);
         }
         return rawRootElement.prototype.append.call(getRawTarget(this), ...nodes);
     };
-    microRootElement.prototype.prepend = function prepend(...nodes) {
+    microDocumentFragment.prototype.prepend = microRootElement.prototype.prepend = function prepend(...nodes) {
         let i = 0;
         let hasPureNode = false;
         while (i < nodes.length) {
@@ -5690,7 +6343,7 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
             i++;
         }
         if (hasPureNode) {
-            return rawMicroPrepend.call(this, ...nodes);
+            return (isDocumentFragment(this) ? rawMicroFragmentPrepend : rawMicroPrepend).call(this, ...nodes);
         }
         return rawRootElement.prototype.prepend.call(getRawTarget(this), ...nodes);
     };
@@ -5706,49 +6359,59 @@ function patchIframeNode(appName, microAppWindow, sandbox) {
         }
         return rawRootElement.prototype.insertAdjacentElement.call(getRawTarget(this), where, element);
     };
-    // patch cloneNode
-    microRootNode.prototype.cloneNode = function cloneNode(deep) {
-        const clonedNode = rawMicroCloneNode.call(this, deep);
-        return updateElementInfo(clonedNode, appName);
-    };
-    rawDefineProperty(microRootElement.prototype, 'innerHTML', {
+    /**
+     * Specific prototype properties:
+     * 1. baseURI
+     * 2. ownerDocument
+     * 3. parentNode
+     * 4. innerHTML
+     */
+    rawDefineProperty(microRootNode.prototype, 'baseURI', {
         configurable: true,
         enumerable: true,
         get() {
-            return rawInnerHTMLDesc.get.call(this);
+            return sandbox.proxyWindow.location.href;
         },
-        set(code) {
-            rawInnerHTMLDesc.set.call(this, code);
-            Array.from(this.children).forEach((child) => {
-                if (isElement(child)) {
-                    updateElementInfo(child, appName);
-                }
-            });
-        }
     });
-    // patch parentNode
-    rawDefineProperty(microRootNode.prototype, 'parentNode', {
+    rawDefineProperty(microRootNode.prototype, 'ownerDocument', {
         configurable: true,
         enumerable: true,
         get() {
-            var _a, _b, _c;
-            // set html.parentNode to microDocument
-            throttleDeferForParentNode(microDocument);
-            const result = rawParentNodeLDesc.get.call(this);
-            /**
-             * If parentNode is <micro-app-body>, return rawDocument.body
-             * Scenes:
-             *  1. element-ui@2/lib/utils/vue-popper.js
-             *    if (this.popperElm.parentNode === document.body) ...
-             * WARNING:
-             *  Will it cause other problems ?
-             *  e.g. target.parentNode.remove(target)
-             */
-            if (isMicroAppBody(result) && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container)) {
-                return ((_c = (_b = microApp.options).getRootElementParentNode) === null || _c === void 0 ? void 0 : _c.call(_b, this, appName)) || rawDocument.body;
-            }
-            return result;
+            var _a;
+            return this.__PURE_ELEMENT__ || this === microDocument
+                ? (_a = rawOwnerDocumentDesc.get) === null || _a === void 0 ? void 0 : _a.call(this) : microDocument;
+        },
+    });
+    // patch parentNode
+    rawDefineProperty(microRootNode.prototype, 'parentNode', getIframeParentNodeDesc(appName, rawParentNodeDesc));
+    microRootNode.prototype.getRootNode = function getRootNode() {
+        return microDocument;
+        // TODO: any case return document?
+        // const rootNode = rawMicroGetRootNode.call(this, options)
+        // if (rootNode === appInstanceMap.get(appName)?.container) return microDocument
+        // return rootNode
+    };
+    // patch cloneNode
+    microRootNode.prototype.cloneNode = function cloneNode(deep) {
+        const clonedNode = rawMicroCloneNode.call(this, deep);
+        return updateElementInfo(clonedNode, appName);
+    };
+    rawDefineProperty(microRootElement.prototype, 'innerHTML', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            var _a;
+            return (_a = rawInnerHTMLDesc.get) === null || _a === void 0 ? void 0 : _a.call(this);
         },
+        set(code) {
+            var _a;
+            (_a = rawInnerHTMLDesc.set) === null || _a === void 0 ? void 0 : _a.call(this, code);
+            Array.from(this.children).forEach((child) => {
+                if (isElement(child)) {
+                    updateElementInfo(child, appName);
+                }
+            });
+        }
     });
     // Adapt to new image(...) scene
     const ImageProxy = new Proxy(microAppWindow.Image, {
@@ -5768,16 +6431,24 @@ function patchIframeAttribute(url, microAppWindow) {
     const microRootElement = microAppWindow.Element;
     const rawMicroSetAttribute = microRootElement.prototype.setAttribute;
     microRootElement.prototype.setAttribute = function setAttribute(key, value) {
-        if (((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
-            (key === 'href' && /^link$/i.test(this.tagName))) {
-            value = CompletionPath(value, url);
+        if (/^micro-app(-\S+)?/i.test(this.tagName) &&
+            key === 'data' &&
+            this.setAttribute !== microRootElement.prototype.setAttribute) {
+            this.setAttribute(key, value);
+        }
+        else {
+            if (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
+                (key === 'href' && /^(a|link|image)$/i.test(this.tagName))) {
+                value = CompletionPath(value, url);
+            }
+            rawMicroSetAttribute.call(this, key, value);
         }
-        rawMicroSetAttribute.call(this, key, value);
     };
     const protoAttrList = [
         [microAppWindow.HTMLImageElement.prototype, 'src'],
         [microAppWindow.HTMLScriptElement.prototype, 'src'],
         [microAppWindow.HTMLLinkElement.prototype, 'href'],
+        [microAppWindow.SVGImageElement.prototype, 'href'],
     ];
     /**
      * element.setAttribute does not trigger this actions:
@@ -5808,16 +6479,17 @@ class IframeSandbox {
         this.active = false;
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
-        // Properties escape to rawWindow, cleared when unmount
-        this.escapeKeys = new Set();
-        // TODO: 初始化和每次跳转时都要更新base的href
+        // Update the base.href when initial and each redirect
         this.updateIframeBase = () => {
             var _a;
-            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', this.proxyLocation.protocol + '//' + this.proxyLocation.host + this.proxyLocation.pathname);
+            // origin must be child app origin
+            (_a = this.baseElement) === null || _a === void 0 ? void 0 : _a.setAttribute('href', createURL(this.url).origin + this.proxyLocation.pathname);
         };
+        this.appName = appName;
+        this.url = url;
         const rawLocation = globalEnv.rawWindow.location;
         const browserHost = rawLocation.protocol + '//' + rawLocation.host;
-        this.deleteIframeElement = this.createIframeElement(appName, browserHost);
+        this.deleteIframeElement = this.createIframeElement(appName, browserHost + rawLocation.pathname);
         this.microAppWindow = this.iframe.contentWindow;
         this.patchIframe(this.microAppWindow, (resolve) => {
             // create new html to iframe
@@ -5845,15 +6517,16 @@ class IframeSandbox {
     /**
      * create iframe for sandbox
      * @param appName app name
-     * @param browserHost browser origin
+     * @param browserPath browser origin
      * @returns release callback
      */
-    createIframeElement(appName, browserHost) {
+    createIframeElement(appName, browserPath) {
         this.iframe = pureCreateElement('iframe');
         const iframeAttrs = {
-            src: browserHost,
-            style: 'display: none',
             id: appName,
+            src: microApp.options.iframeSrc || browserPath,
+            style: 'display: none',
+            'powered-by': 'micro-app',
         };
         Object.keys(iframeAttrs).forEach((key) => this.iframe.setAttribute(key, iframeAttrs[key]));
         // effect action during construct
@@ -5887,19 +6560,12 @@ class IframeSandbox {
          *  1. iframe router and browser router are separated, we should update iframe router manually
          *  2. withSandbox location is browser location when disable memory-router, so no need to do anything
          */
-        /**
-         * TODO:
-         * 1. iframe关闭虚拟路由系统后，default-page无法使用，推荐用户直接使用浏览器地址控制首页渲染
-         *    补充：keep-router-state 也无法配置，因为keep-router-state一定为true。
-         * 2. 导航拦截、current.route 可以正常使用
-         * 3. 可以正常控制子应用跳转，方式还是自上而下(也可以是子应用内部跳转，这种方式更好一点，减小对基座的影响，不会导致vue的循环刷新)
-         * 4. 关闭虚拟路由以后会对应 route-mode='custom' 模式，包括with沙箱也会这么做
-         * 5. 关闭虚拟路由是指尽可能模拟没有虚拟路由的情况，子应用直接获取浏览器location和history，控制浏览器跳转
-         */
         this.initRouteState(defaultPage);
         // unique listener of popstate event for child app
         this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        if (isRouterModeCustom(this.microAppWindow.__MICRO_APP_NAME__)) {
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        }
         /* --- memory router part --- end */
         /**
          * create base element to iframe
@@ -5916,6 +6582,7 @@ class IframeSandbox {
     }
     stop({ umdMode, keepRouteState, destroy, clearData, }) {
         var _a;
+        // sandbox.stop may exec before sandbox.start, e.g: iframe sandbox + default mode + remount
         if (!this.active)
             return;
         this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
@@ -5927,10 +6594,7 @@ class IframeSandbox {
         /* --- memory router part --- end */
         if (!umdMode || destroy) {
             this.deleteIframeElement();
-            this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(globalEnv.rawWindow, key);
-            });
-            this.escapeKeys.clear();
+            this.clearHijackUmdHooks();
         }
         if (--globalEnv.activeSandbox === 0) {
             releasePatchElementAndDocument();
@@ -5944,6 +6608,7 @@ class IframeSandbox {
      * NOTE:
      *  1. execute as early as possible
      *  2. run after patchRouter & createProxyWindow
+     * TODO: 设置为只读变量
      */
     initStaticGlobalKeys(appName, url, microAppWindow) {
         microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
@@ -6145,12 +6810,55 @@ class IframeSandbox {
         patchElementTree(container, this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
+     * action before exec scripts when mount
      * Actions:
      * 1. patch static elements from html
+     * 2. hijack umd hooks -- mount, unmount, micro-app-appName
      * @param container micro app container
      */
-    actionBeforeExecScripts(container) {
+    actionsBeforeExecScripts(container, handleUmdHooks) {
         this.patchStaticElement(container);
+        this.clearHijackUmdHooks = this.hijackUmdHooks(this.appName, this.microAppWindow, handleUmdHooks);
+    }
+    // hijack mount, unmount, micro-app-appName hook to microAppWindow
+    hijackUmdHooks(appName, microAppWindow, handleUmdHooks) {
+        let mount, unmount, microAppLibrary;
+        rawDefineProperties(microAppWindow, {
+            mount: {
+                configurable: true,
+                get: () => mount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !mount) {
+                        handleUmdHooks(mount = value, unmount);
+                    }
+                }
+            },
+            unmount: {
+                configurable: true,
+                get: () => unmount,
+                set: (value) => {
+                    if (this.active && isFunction(value) && !unmount) {
+                        handleUmdHooks(mount, unmount = value);
+                    }
+                }
+            },
+            [`micro-app-${appName}`]: {
+                configurable: true,
+                get: () => microAppLibrary,
+                set: (value) => {
+                    if (this.active && isPlainObject(value) && !microAppLibrary) {
+                        microAppLibrary = value;
+                        handleUmdHooks(microAppLibrary.mount, microAppLibrary.unmount);
+                    }
+                }
+            }
+        });
+        return () => {
+            mount = unmount = microAppLibrary = null;
+        };
+    }
+    setStaticAppState(state) {
+        this.microAppWindow.__MICRO_APP_STATE__ = state;
     }
 }
 IframeSandbox.activeCount = 0; // number of active sandbox
@@ -6174,8 +6882,9 @@ class CreateApp {
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
-        this.inline = inline !== null && inline !== void 0 ? inline : false;
+        // exec before getInlineModeState
         this.iframe = iframe !== null && iframe !== void 0 ? iframe : false;
+        this.inline = this.getInlineModeState(inline);
         /**
          * NOTE:
          *  1. Navigate after micro-app created, before mount
@@ -6199,12 +6908,17 @@ class CreateApp {
     }
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
+     * defaultPage disablePatchRequest routerMode baseroute is only for prerender app
      */
-    onLoad(html, defaultPage, disablePatchRequest, routerMode, baseroute) {
+    onLoad({ html, 
+    // below params is only for prerender app
+    defaultPage, routerMode, baseroute, disablePatchRequest, }) {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            if (!this.isPrefetch && !this.isUnmounted()) {
+            if (this.isUnmounted())
+                return;
+            if (!this.isPrefetch) {
                 getRootContainer(this.container).mount(this);
             }
             else if (this.isPrerender) {
@@ -6231,11 +6945,11 @@ class CreateApp {
                 this.mount({
                     container,
                     inline: this.inline,
-                    routerMode: routerMode,
-                    baseroute: baseroute || '',
                     fiber: true,
                     defaultPage: defaultPage || '',
                     disablePatchRequest: disablePatchRequest !== null && disablePatchRequest !== void 0 ? disablePatchRequest : false,
+                    routerMode: routerMode,
+                    baseroute: baseroute || '',
                 });
             }
         }
@@ -6272,6 +6986,11 @@ class CreateApp {
             this.container = container;
             // mount before prerender exec mount (loading source), set isPrerender to false
             this.isPrerender = false;
+            // dispatch state event to micro app
+            // TODO: statechange 还是 state-change，保持一致
+            dispatchCustomEventToMicroApp(this, 'statechange', {
+                appState: appStates.LOADING
+            });
             // reset app state to LOADING
             return this.setAppState(appStates.LOADING);
         }
@@ -6292,6 +7011,14 @@ class CreateApp {
             if (this.isPrerender &&
                 isDivElement(this.container) &&
                 this.container.hasAttribute('prerender')) {
+                /**
+                 * current this.container is <div prerender='true'></div>
+                 * set this.container to <micro-app></micro-app>
+                 * NOTE:
+                 *  1. must exec before this.sandBox.rebuildEffectSnapshot
+                 *  2. must exec before this.preRenderEvents?.forEach((cb) => cb())
+                 */
+                this.container = this.cloneContainer(container, this.container, false);
                 /**
                  * rebuild effect event of window, document, data center
                  * explain:
@@ -6300,14 +7027,6 @@ class CreateApp {
                  * 3. rebuild after js exec end, normal recovery effect event
                  */
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
-                // current this.container is <div prerender='true'></div>
-                cloneContainer(container, this.container, false);
-                /**
-                 * set this.container to <micro-app></micro-app>
-                 * NOTE:
-                 * must exec before this.preRenderEvents?.forEach((cb) => cb())
-                 */
-                this.container = container;
                 (_b = this.preRenderEvents) === null || _b === void 0 ? void 0 : _b.forEach((cb) => cb());
                 // reset isPrerender config
                 this.isPrerender = false;
@@ -6318,10 +7037,12 @@ class CreateApp {
             }
             else {
                 this.container = container;
-                this.inline = inline;
+                this.inline = this.getInlineModeState(inline);
                 this.fiber = fiber;
                 this.routerMode = routerMode;
-                const dispatchBeforeMount = () => dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+                const dispatchBeforeMount = () => {
+                    dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
+                };
                 if (this.isPrerender) {
                     ((_d = this.preRenderEvents) !== null && _d !== void 0 ? _d : (this.preRenderEvents = [])).push(dispatchBeforeMount);
                 }
@@ -6329,8 +7050,12 @@ class CreateApp {
                     dispatchBeforeMount();
                 }
                 this.setAppState(appStates.MOUNTING);
-                // TODO: 将所有cloneContainer中的'as Element'去掉，兼容shadowRoot的场景
-                cloneContainer(this.container, this.source.html, !this.umdMode);
+                // dispatch state event to micro app
+                dispatchCustomEventToMicroApp(this, 'statechange', {
+                    appState: appStates.MOUNTING
+                });
+                // TODO: 兼容shadowRoot的场景
+                this.cloneContainer(this.container, this.source.html, !this.umdMode);
                 (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
                     umdMode: this.umdMode,
                     baseroute,
@@ -6338,37 +7063,35 @@ class CreateApp {
                     disablePatchRequest,
                 });
                 if (!this.umdMode) {
-                    // update element info of html
-                    (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.actionBeforeExecScripts(this.container);
-                    // if all js are executed, param isFinished will be true
-                    execScripts(this, (isFinished) => {
-                        if (!this.umdMode) {
-                            const { mount, unmount } = this.getUmdLibraryHooks();
-                            /**
-                             * umdHookUnmount can works in default mode
-                             * register through window.unmount
-                             */
-                            this.umdHookUnmount = unmount;
+                    // patch element info of html
+                    (_f = this.sandBox) === null || _f === void 0 ? void 0 : _f.actionsBeforeExecScripts(this.container, (mount, unmount) => {
+                        var _a;
+                        if (!this.umdMode && !this.isUnmounted()) {
+                            this.umdHookMount = isFunction(mount) ? mount : null;
+                            // umdHookUnmount can works in default mode, register by window.unmount
+                            this.umdHookUnmount = isFunction(unmount) ? unmount : null;
                             // if mount & unmount is function, the sub app is umd mode
-                            if (isFunction(mount) && isFunction(unmount)) {
-                                this.umdHookMount = mount;
-                                // sandbox must exist
-                                this.sandBox.markUmdMode(this.umdMode = true);
+                            if (isFunction(this.umdHookMount) && isFunction(this.umdHookUnmount)) {
+                                (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.markUmdMode(this.umdMode = true);
                                 try {
-                                    this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
+                                    // if appState is mounted, it means that isFinished is true and this.handleMounted has already been executed, just exec this.umdHookMount
+                                    if (this.getAppState() === appStates.MOUNTED) {
+                                        this.umdHookMount(microApp.getData(this.name, true));
+                                    }
+                                    else {
+                                        this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
+                                    }
                                 }
                                 catch (e) {
-                                    /**
-                                     * TODO:
-                                     *  1. 是否应该直接抛出错误
-                                     *  2. 是否应该触发error生命周期
-                                     */
-                                    logError('An error occurred in window.mount \n', this.name, e);
+                                    logError('An error occurred when mount \n', this.name, e);
                                 }
                             }
-                            else if (isFinished === true) {
-                                this.handleMounted();
-                            }
+                        }
+                    });
+                    // if all js are executed, param isFinished will be true
+                    execScripts(this, (isFinished) => {
+                        if (!this.umdMode && isFinished === true) {
+                            this.handleMounted();
                         }
                     });
                 }
@@ -6378,13 +7101,22 @@ class CreateApp {
                         this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
                     }
                     catch (e) {
-                        logError('An error occurred in window.mount \n', this.name, e);
+                        logError('An error occurred when mount \n', this.name, e);
                     }
                 }
             }
         };
-        // TODO: any替换为iframe沙箱类型
-        this.iframe ? this.sandBox.sandboxReady.then(nextAction) : nextAction();
+        /**
+         * Initialization of sandbox is async, especially iframe sandbox are macro tasks
+         * when child apps switch quickly, we need to pay attention to the following points:
+         * NOTE:
+         *  1. unmount app before exec nextAction (especially: iframe sandbox + default mode + remount)
+         *     this.container is null, this.sandBox will not start
+         *  2. remount app of note 1
+         *  3. unmount app during exec js
+         */
+        // TODO: 可优化？
+        this.sandBox ? this.sandBox.sandboxReady.then(() => !this.isUnmounted() && nextAction()) : nextAction();
     }
     /**
      * handle for promise umdHookMount
@@ -6393,16 +7125,17 @@ class CreateApp {
     handleMounted(umdHookMountResult) {
         var _a, _b;
         const dispatchAction = () => {
+            const nextAction = () => this.actionsAfterMounted();
             if (isPromise(umdHookMountResult)) {
                 umdHookMountResult
-                    .then(() => this.dispatchMountedEvent())
+                    .then(nextAction)
                     .catch((e) => {
                     logError('An error occurred in window.mount \n', this.name, e);
-                    this.dispatchMountedEvent();
+                    nextAction();
                 });
             }
             else {
-                this.dispatchMountedEvent();
+                nextAction();
             }
         };
         if (this.isPrerender) {
@@ -6416,12 +7149,18 @@ class CreateApp {
     /**
      * dispatch mounted event when app run finished
      */
-    dispatchMountedEvent() {
+    actionsAfterMounted() {
         var _a;
         if (!this.isUnmounted()) {
             this.setAppState(appStates.MOUNTED);
             // call window.onmount of child app
             execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONMOUNT), this.name, microGlobalEvent.ONMOUNT, microApp.getData(this.name, true));
+            // dispatch state event to micro app
+            dispatchCustomEventToMicroApp(this, 'statechange', {
+                appState: appStates.MOUNTED
+            });
+            // dispatch mounted event to micro app
+            dispatchCustomEventToMicroApp(this, 'mounted');
             // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
             /**
@@ -6444,6 +7183,8 @@ class CreateApp {
      * unmount app
      * NOTE:
      *  1. do not add any params on account of unmountApp
+     *  2. this.container maybe null: Initialization of sandbox is async, child app may unmount before exec nextAction of mount
+     *  3. unmount app when loading files (this.container is not null)
      * @param destroy completely destroy, delete cache resources
      * @param clearData clear data of dateCenter
      * @param keepRouteState keep route state when unmount, default is false
@@ -6453,25 +7194,12 @@ class CreateApp {
         var _a;
         destroy = destroy || this.state === appStates.LOAD_FAILED;
         this.setAppState(appStates.UNMOUNT);
-        let umdHookUnmountResult = null;
         try {
-            // call umd unmount hook before the sandbox is cleared
-            umdHookUnmountResult = (_a = this.umdHookUnmount) === null || _a === void 0 ? void 0 : _a.call(this, microApp.getData(this.name, true));
+            this.handleUnmounted(destroy, clearData, keepRouteState, unmountcb, (_a = this.umdHookUnmount) === null || _a === void 0 ? void 0 : _a.call(this, microApp.getData(this.name, true)));
         }
         catch (e) {
-            logError('An error occurred in window.unmount \n', this.name, e);
+            logError('An error occurred when unmount \n', this.name, e);
         }
-        // dispatch unmount event to micro app
-        dispatchCustomEventToMicroApp(this, 'unmount');
-        // call window.onunmount of child app
-        execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONUNMOUNT), this.name, microGlobalEvent.ONUNMOUNT);
-        this.handleUnmounted({
-            destroy,
-            clearData,
-            keepRouteState,
-            unmountcb,
-            umdHookUnmountResult,
-        });
     }
     /**
      * handle for promise umdHookUnmount
@@ -6481,8 +7209,16 @@ class CreateApp {
      * @param unmountcb callback of unmount
      * @param umdHookUnmountResult result of umdHookUnmount
      */
-    handleUnmounted({ destroy, clearData, keepRouteState, unmountcb, umdHookUnmountResult, }) {
-        const nextAction = () => this.actionsForUnmount({
+    handleUnmounted(destroy, clearData, keepRouteState, unmountcb, umdHookUnmountResult) {
+        // dispatch state event to micro app
+        dispatchCustomEventToMicroApp(this, 'statechange', {
+            appState: appStates.UNMOUNT
+        });
+        // dispatch unmount event to micro app
+        dispatchCustomEventToMicroApp(this, 'unmount');
+        // call window.onunmount of child app
+        execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONUNMOUNT), this.name, microGlobalEvent.ONUNMOUNT);
+        const nextAction = () => this.actionsAfterUnmounted({
             destroy,
             clearData,
             keepRouteState,
@@ -6491,7 +7227,12 @@ class CreateApp {
         if (isPromise(umdHookUnmountResult)) {
             // async window.unmount will cause appName bind error in nest app
             removeDomScope();
-            umdHookUnmountResult.then(nextAction).catch(nextAction);
+            umdHookUnmountResult
+                .then(nextAction)
+                .catch((e) => {
+                logError('An error occurred in window.unmount \n', this.name, e);
+                nextAction();
+            });
         }
         else {
             nextAction();
@@ -6504,10 +7245,10 @@ class CreateApp {
      * @param keepRouteState keep route state when unmount, default is false
      * @param unmountcb callback of unmount
      */
-    actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb, }) {
+    actionsAfterUnmounted({ destroy, clearData, keepRouteState, unmountcb, }) {
         var _a;
         if (this.umdMode && this.container && !destroy) {
-            cloneContainer(this.source.html, this.container, false);
+            this.cloneContainer(this.source.html, this.container, false);
         }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
@@ -6527,12 +7268,27 @@ class CreateApp {
         unmountcb === null || unmountcb === void 0 ? void 0 : unmountcb();
     }
     clearOptions(destroy) {
-        this.container.innerHTML = '';
-        this.container = null;
+        var _a, _b;
         this.isPrerender = false;
         this.preRenderEvents = null;
         this.setKeepAliveState(null);
+        if (this.container) {
+            this.container.innerHTML = '';
+            this.container = null;
+        }
+        else if (!this.umdMode) {
+            /**
+             * this.container is null means sandBox.start has not exec, so sandBox.stop won't exec either
+             * we should remove iframeElement in default mode manually
+             */
+            (_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.deleteIframeElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
         // in iframe sandbox & default mode, delete the sandbox & iframeElement
+        /**
+         * TODO:
+         *  1. with沙箱与iframe沙箱保持一致：with沙箱默认模式下删除 或者 iframe沙箱umd模式下保留
+         *  2. 接1.0，this.sandBox置空，还需要注意后续app.sandBox相关操作，比如 scripts.ts --> app.iframe ? app.sandBox!.microBody : app.querySelector('micro-app-body')，如果是fiber或者预加载，会存在卸载后js还在处理的情况
+         */
         if (this.iframe && !this.umdMode)
             this.sandBox = null;
         if (destroy)
@@ -6563,7 +7319,7 @@ class CreateApp {
         });
         // dispatch afterHidden event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERHIDDEN);
-        if (this.routerMode !== ROUTER_MODE_CUSTOM) {
+        if (isRouterModeSearch(this.name)) {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
@@ -6574,7 +7330,7 @@ class CreateApp {
             getRootContainer(this.container).unmount();
         }
         else {
-            this.container = cloneContainer(pureCreateElement('div'), this.container, false);
+            this.container = this.cloneContainer(pureCreateElement('div'), this.container, false);
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
         }
         callback === null || callback === void 0 ? void 0 : callback();
@@ -6582,6 +7338,14 @@ class CreateApp {
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
         var _a, _b;
+        /**
+         * NOTE:
+         *  1. this.container must set to container(micro-app element) before exec rebuildEffectSnapshot
+         *    ISSUE: https://github.com/micro-zoe/micro-app/issues/1115
+         *  2. rebuildEffectSnapshot must exec before dispatch beforeshow event
+         */
+        const oldContainer = this.container;
+        this.container = container;
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
         // dispatch beforeShow event to micro-app
         dispatchCustomEventToMicroApp(this, 'appstate-change', {
@@ -6590,13 +7354,13 @@ class CreateApp {
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
-        this.container = cloneContainer(container, this.container, false);
+        this.cloneContainer(this.container, oldContainer, false);
         /**
          * TODO:
          *  问题：当路由模式为custom时，keep-alive应用在重新展示，是否需要根据子应用location信息更新浏览器地址？
-         *  暂时不这么做吧，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
+         *  暂时不这么做，因为无法确定二次展示时新旧地址是否相同，是否带有特殊信息
          */
-        if (this.routerMode !== ROUTER_MODE_CUSTOM) {
+        if (isRouterModeSearch(this.name)) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
         }
@@ -6612,8 +7376,40 @@ class CreateApp {
      * @param e Error
      */
     onerror(e) {
+        // dispatch state event to micro app
+        dispatchCustomEventToMicroApp(this, 'statechange', {
+            appState: appStates.LOAD_FAILED
+        });
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
     }
+    /**
+     * Parse htmlString to DOM
+     * NOTE: iframe sandbox will use DOMParser of iframeWindow, with sandbox will use DOMParser of base app
+     * @param htmlString DOMString
+     * @returns parsed DOM
+     */
+    parseHtmlString(htmlString) {
+        var _a;
+        const DOMParser = ((_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) ? this.sandBox.proxyWindow.DOMParser
+            : globalEnv.rawWindow.DOMParser;
+        return (new DOMParser()).parseFromString(htmlString, 'text/html').body;
+    }
+    /**
+     * clone origin elements to target
+     * @param target Accept cloned elements
+     * @param origin Cloned element
+     * @param deep deep clone or transfer dom
+     */
+    cloneContainer(target, origin, deep) {
+        // 在基座接受到afterhidden方法后立即执行unmount，彻底destroy应用时，因为unmount时同步执行，所以this.container为null后才执行cloneContainer
+        if (origin && target) {
+            target.innerHTML = '';
+            Array.from(deep ? this.parseHtmlString(origin.innerHTML).childNodes : origin.childNodes).forEach((node) => {
+                target.appendChild(node);
+            });
+        }
+        return target;
+    }
     /**
      * Scene:
      *  1. create app
@@ -6622,17 +7418,15 @@ class CreateApp {
      */
     createSandbox() {
         if (this.useSandbox && !this.sandBox) {
-            if (this.iframe) {
-                this.sandBox = new IframeSandbox(this.name, this.url);
-            }
-            else {
-                this.sandBox = new WithSandBox(this.name, this.url);
-            }
+            this.sandBox = this.iframe ? new IframeSandbox(this.name, this.url) : new WithSandBox(this.name, this.url);
         }
     }
     // set app state
     setAppState(state) {
+        var _a;
         this.state = state;
+        // set window.__MICRO_APP_STATE__
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.setStaticAppState(state);
     }
     // get app state
     getAppState() {
@@ -6654,23 +7448,6 @@ class CreateApp {
     isHidden() {
         return keepAliveStates.KEEP_ALIVE_HIDDEN === this.keepAliveState;
     }
-    // get umd library, if it not exist, return empty object
-    getUmdLibraryHooks() {
-        // after execScripts, the app maybe unmounted
-        if (!this.isUnmounted() && this.sandBox) {
-            const libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
-            const proxyWindow = this.sandBox.proxyWindow;
-            // compatible with pre versions
-            if (isObject(proxyWindow[libraryName])) {
-                return proxyWindow[libraryName];
-            }
-            return {
-                mount: proxyWindow.mount,
-                unmount: proxyWindow.unmount,
-            };
-        }
-        return {};
-    }
     getMicroAppGlobalHook(eventName) {
         var _a, _b;
         const listener = (_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) === null || _b === void 0 ? void 0 : _b[eventName];
@@ -6682,6 +7459,15 @@ class CreateApp {
     querySelectorAll(selectors) {
         return this.container ? globalEnv.rawElementQuerySelectorAll.call(this.container, selectors) : [];
     }
+    /**
+     * NOTE:
+     * 1. If the iframe sandbox no longer enforces the use of inline mode in the future, the way getElementsByTagName retrieves the script from the iframe by default needs to be changed, because in non inline mode, the script in the iframe may be empty
+     * @param inline inline mode config
+     */
+    getInlineModeState(inline) {
+        var _a;
+        return (_a = (this.iframe || inline)) !== null && _a !== void 0 ? _a : false;
+    }
 }
 // iframe route mode
 function isIframeSandbox(appName) {
@@ -6767,15 +7553,11 @@ function handleNewNode(child, app) {
  * @param app app
  * @param method raw method
  * @param parent parent node
- * @param targetChild target node
- * @param passiveChild second param of insertBefore and replaceChild
+ * @param targetNode target node
+ * @param passiveNode second param of insertBefore and replaceChild
  */
-function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    const hijackParent = getHijackParent(parent, targetChild, app);
-    /**
-     * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
-     * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
-     */
+function invokePrototypeMethod(app, rawMethod, parent, targetNode, passiveNode) {
+    const hijackParent = getHijackParent(parent, targetNode, app);
     if (hijackParent) {
         /**
          * If parentNode is <micro-app-body>, return rawDocument.body
@@ -6792,9 +7574,9 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
         if (!isIframeSandbox(app.name) &&
             isMicroAppBody(hijackParent) &&
             rawMethod !== globalEnv.rawRemoveChild) {
-            const descriptor = Object.getOwnPropertyDescriptor(targetChild, 'parentNode');
-            if ((!descriptor || descriptor.configurable) && !targetChild.__MICRO_APP_HAS_DPN__) {
-                rawDefineProperties(targetChild, {
+            const descriptor = Object.getOwnPropertyDescriptor(targetNode, 'parentNode');
+            if ((!descriptor || descriptor.configurable) && !targetNode.__MICRO_APP_HAS_DPN__) {
+                rawDefineProperties(targetNode, {
                     parentNode: {
                         configurable: true,
                         get() {
@@ -6814,57 +7596,85 @@ function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild
                 });
             }
         }
+        if ((process.env.NODE_ENV !== 'production') &&
+            isIFrameElement(targetNode) &&
+            rawMethod === globalEnv.rawAppendChild) {
+            fixReactHMRConflict(app);
+        }
         /**
-         * 1. If passiveChild exists, it must be insertBefore or replaceChild
-         * 2. When removeChild, targetChild may not be in microAppHead or head
+         * 1. If passiveNode exists, it must be insertBefore or replaceChild
+         * 2. When removeChild, targetNode may not be in microAppHead or head
+         * NOTE:
+         *  1. If passiveNode not in hijackParent, insertBefore replaceChild will be degraded to appendChild
+         *    E.g: document.head.replaceChild(targetNode, document.scripts[0])
+         *  2. If passiveNode not in hijackParent but in parent and method is insertBefore, try insert it into the position corresponding to hijackParent
+         *    E.g: document.head.insertBefore(targetNode, document.head.childNodes[0])
+         *    ISSUE: https://github.com/micro-zoe/micro-app/issues/1071
          */
-        if (passiveChild && !hijackParent.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(hijackParent, targetChild);
-        }
-        else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
+        if (passiveNode && !hijackParent.contains(passiveNode)) {
+            if (rawMethod === globalEnv.rawInsertBefore && parent.contains(passiveNode)) {
+                const indexOfParent = Array.from(parent.childNodes).indexOf(passiveNode);
+                if (hijackParent.childNodes[indexOfParent]) {
+                    return invokeRawMethod(rawMethod, hijackParent, targetNode, hijackParent.childNodes[indexOfParent], app);
+                }
             }
-            return targetChild;
+            return globalEnv.rawAppendChild.call(hijackParent, targetNode);
         }
-        if ((process.env.NODE_ENV !== 'production') &&
-            isIFrameElement(targetChild) &&
-            rawMethod === globalEnv.rawAppendChild) {
-            fixReactHMRConflict(app);
+        else if (rawMethod === globalEnv.rawRemoveChild && !hijackParent.contains(targetNode)) {
+            if (parent.contains(targetNode)) {
+                return rawMethod.call(parent, targetNode);
+            }
+            return targetNode;
         }
-        return invokeRawMethod(rawMethod, hijackParent, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, hijackParent, targetNode, passiveNode, app);
     }
-    return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
+    return invokeRawMethod(rawMethod, parent, targetNode, passiveNode, app);
 }
 // head/body map to micro-app-head/micro-app-body
-function getHijackParent(parent, targetChild, app) {
+function getHijackParent(parent, targetNode, app) {
     if (app) {
         if (parent === document.head) {
-            if (app.iframe && isScriptElement(targetChild)) {
+            if (app.iframe && isScriptElement(targetNode)) {
                 return app.sandBox.microHead;
             }
             return app.querySelector('micro-app-head');
         }
         if (parent === document.body || parent === document.body.parentNode) {
-            if (app.iframe && isScriptElement(targetChild)) {
+            if (app.iframe && isScriptElement(targetNode)) {
                 return app.sandBox.microBody;
             }
             return app.querySelector('micro-app-body');
         }
-        if (app.iframe && isScriptElement(targetChild)) {
+        if (app.iframe && isScriptElement(targetNode)) {
             return app.sandBox.microBody;
         }
     }
     return null;
 }
-function invokeRawMethod(rawMethod, parent, targetChild, passiveChild) {
+function invokeRawMethod(rawMethod, parent, targetNode, passiveNode, app) {
     if (isPendMethod(rawMethod)) {
-        return rawMethod.call(parent, targetChild);
+        /**
+         * In iframe sandbox, script will pend to iframe.body, so we should reset rawMethod, because:
+         * Element.prototype.append === DocumentFragment.prototype.append ==> false
+         * Element.prototype.prepend === DocumentFragment.prototype.prepend ==> false
+         */
+        if ((app === null || app === void 0 ? void 0 : app.iframe) && isScriptElement(targetNode)) {
+            if (rawMethod === globalEnv.rawFragmentAppend) {
+                rawMethod = globalEnv.rawAppend;
+            }
+            else if (rawMethod === globalEnv.rawFragmentPrepend) {
+                rawMethod = globalEnv.rawPrepend;
+            }
+        }
+        return rawMethod.call(parent, targetNode);
     }
-    return rawMethod.call(parent, targetChild, passiveChild);
+    return rawMethod.call(parent, targetNode, passiveNode);
 }
 function isPendMethod(method) {
-    return method === globalEnv.rawAppend || method === globalEnv.rawPrepend;
+    return (method === globalEnv.rawAppend ||
+        method === globalEnv.rawPrepend ||
+        method === globalEnv.rawFragmentAppend ||
+        method === globalEnv.rawFragmentPrepend);
 }
 /**
  * Attempt to complete the static resource address again before insert the node
@@ -6881,7 +7691,7 @@ function completePathDynamic(app, newChild) {
                 globalEnv.rawSetAttribute.call(newChild, 'srcset', CompletionPath(newChild.getAttribute('srcset'), app.url));
             }
         }
-        else if (/^link$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
+        else if (/^(a|link|image)$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
             globalEnv.rawSetAttribute.call(newChild, 'href', CompletionPath(newChild.getAttribute('href'), app.url));
         }
     }
@@ -6890,26 +7700,26 @@ function completePathDynamic(app, newChild) {
  * method of handle new node
  * @param parent parent node
  * @param newChild new node
- * @param passiveChild passive node
+ * @param passiveNode passive node
  * @param rawMethod method
  */
-function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
+function commonElementHandler(parent, newChild, passiveNode, rawMethod) {
     const currentAppName = getCurrentAppName();
     if (isNode(newChild) &&
         !newChild.__PURE_ELEMENT__ &&
         (newChild.__MICRO_APP_NAME__ ||
             currentAppName)) {
-        newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
+        updateElementInfo(newChild, newChild.__MICRO_APP_NAME__ || currentAppName);
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
+            if (isStyleElement(newChild)) {
+                parent.getRootNode() instanceof ShadowRoot && newChild.setAttribute('ignore', 'true');
+            }
             completePathDynamic(app, newChild);
-            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveChild && getMappingNode(passiveChild));
+            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveNode && getMappingNode(passiveNode));
         }
     }
-    if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        return rawMethod.call(parent, newChild);
-    }
-    return rawMethod.call(parent, newChild, passiveChild);
+    return invokeRawMethod(rawMethod, parent, newChild, passiveNode);
 }
 /**
  * Rewrite element prototype method
@@ -6917,36 +7727,20 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
 function patchElementAndDocument() {
     patchDocument$2();
     const rawRootElement = globalEnv.rawRootElement;
+    const rawRootNode = globalEnv.rawRootNode;
+    const rawDocumentFragment = globalEnv.rawDocumentFragment;
     // prototype methods of add element👇
-    rawRootElement.prototype.appendChild = function appendChild(newChild) {
+    rawRootNode.prototype.appendChild = function appendChild(newChild) {
         return commonElementHandler(this, newChild, null, globalEnv.rawAppendChild);
     };
-    rawRootElement.prototype.insertBefore = function insertBefore(newChild, refChild) {
+    rawRootNode.prototype.insertBefore = function insertBefore(newChild, refChild) {
         return commonElementHandler(this, newChild, refChild, globalEnv.rawInsertBefore);
     };
-    rawRootElement.prototype.replaceChild = function replaceChild(newChild, oldChild) {
+    rawRootNode.prototype.replaceChild = function replaceChild(newChild, oldChild) {
         return commonElementHandler(this, newChild, oldChild, globalEnv.rawReplaceChild);
     };
-    rawRootElement.prototype.append = function append(...nodes) {
-        let i = 0;
-        while (i < nodes.length) {
-            let node = nodes[i];
-            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
-            commonElementHandler(this, markElement(node), null, globalEnv.rawAppend);
-            i++;
-        }
-    };
-    rawRootElement.prototype.prepend = function prepend(...nodes) {
-        let i = nodes.length;
-        while (i > 0) {
-            let node = nodes[i - 1];
-            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
-            commonElementHandler(this, markElement(node), null, globalEnv.rawPrepend);
-            i--;
-        }
-    };
     // prototype methods of delete element👇
-    rawRootElement.prototype.removeChild = function removeChild(oldChild) {
+    rawRootNode.prototype.removeChild = function removeChild(oldChild) {
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
@@ -6961,6 +7755,24 @@ function patchElementAndDocument() {
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
+    rawDocumentFragment.prototype.append = rawRootElement.prototype.append = function append(...nodes) {
+        let i = 0;
+        while (i < nodes.length) {
+            let node = nodes[i];
+            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
+            commonElementHandler(this, markElement(node), null, isDocumentFragment(this) ? globalEnv.rawFragmentAppend : globalEnv.rawAppend);
+            i++;
+        }
+    };
+    rawDocumentFragment.prototype.prepend = rawRootElement.prototype.prepend = function prepend(...nodes) {
+        let i = nodes.length;
+        while (i > 0) {
+            let node = nodes[i - 1];
+            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
+            commonElementHandler(this, markElement(node), null, isDocumentFragment(this) ? globalEnv.rawFragmentPrepend : globalEnv.rawPrepend);
+            i--;
+        }
+    };
     /**
      * The insertAdjacentElement method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
      * NOTE:
@@ -6980,48 +7792,81 @@ function patchElementAndDocument() {
         }
         return globalEnv.rawInsertAdjacentElement.call(this, where, element);
     };
-    // patch cloneNode
-    rawRootElement.prototype.cloneNode = function cloneNode(deep) {
-        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
-        this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
-        return clonedNode;
-    };
-    function getQueryTarget(node) {
-        const currentAppName = getCurrentAppName();
-        if ((node === document.body || node === document.head) && currentAppName) {
+    /**
+     * document.body(head).querySelector(querySelectorAll) hijack to microAppBody(microAppHead).querySelector(querySelectorAll)
+     * NOTE:
+     *  1. May cause some problems!
+     *  2. Add config options?
+     */
+    function getElementQueryTarget(targetNode) {
+        const currentAppName = getIframeCurrentAppName() || getCurrentAppName();
+        if ((targetNode === document.body || targetNode === document.head) && currentAppName) {
             const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
-                if (node === document.body) {
+                if (targetNode === document.body) {
                     return app.querySelector('micro-app-body');
                 }
-                else if (node === document.head) {
+                else if (targetNode === document.head) {
                     return app.querySelector('micro-app-head');
                 }
             }
         }
-        return null;
+        return targetNode;
+    }
+    /**
+     * In iframe sandbox, script will render to iframe instead of micro-app-body
+     * So when query elements, we need to search both micro-app and iframe
+     * @param isEmpty get empty result
+     * @param targetNode targetNode element
+     * @param result origin result
+     * @param selectors selectors
+     * @param methodName querySelector or querySelectorAll
+     */
+    function getElementQueryResult(isEmpty, targetNode, result, selectors, methodName) {
+        if (isEmpty) {
+            const currentAppName = getIframeCurrentAppName() || getCurrentAppName();
+            if (currentAppName && isIframeSandbox(currentAppName)) {
+                const app = appInstanceMap.get(currentAppName);
+                if (isMicroAppHead(targetNode)) {
+                    return app.sandBox.microHead[methodName](selectors);
+                }
+                if (isMicroAppBody(targetNode)) {
+                    return app.sandBox.microBody[methodName](selectors);
+                }
+            }
+        }
+        return result;
     }
     rawRootElement.prototype.querySelector = function querySelector(selectors) {
         var _a;
-        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
-        return globalEnv.rawElementQuerySelector.call(target, selectors);
+        const _this = (_a = getElementQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
+        const result = globalEnv.rawElementQuerySelector.call(_this, selectors);
+        return getElementQueryResult(isNull(result) && _this !== this, _this, result, selectors, 'querySelector');
     };
     rawRootElement.prototype.querySelectorAll = function querySelectorAll(selectors) {
         var _a;
-        const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
-        return globalEnv.rawElementQuerySelectorAll.call(target, selectors);
+        const _this = (_a = getElementQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
+        const result = globalEnv.rawElementQuerySelectorAll.call(_this, selectors);
+        return getElementQueryResult(!result.length && _this !== this, _this, result, selectors, 'querySelectorAll');
     };
     // rewrite setAttribute, complete resource address
     rawRootElement.prototype.setAttribute = function setAttribute(key, value) {
-        const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
-        if (appName &&
-            appInstanceMap.has(appName) &&
-            (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
-                (key === 'href' && /^link$/i.test(this.tagName)))) {
-            const app = appInstanceMap.get(appName);
-            value = CompletionPath(value, app.url);
+        if (/^micro-app(-\S+)?/i.test(this.tagName) &&
+            key === 'data' &&
+            this.setAttribute !== rawRootElement.prototype.setAttribute) {
+            this.setAttribute(key, value);
+        }
+        else {
+            const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+            if (appName &&
+                appInstanceMap.has(appName) &&
+                (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
+                    (key === 'href' && /^(a|link|image)$/i.test(this.tagName)))) {
+                const app = appInstanceMap.get(appName);
+                value = CompletionPath(value, app.url);
+            }
+            globalEnv.rawSetAttribute.call(this, key, value);
         }
-        globalEnv.rawSetAttribute.call(this, key, value);
     };
     /**
      * TODO: 兼容直接通过img.src等操作设置的资源
@@ -7048,7 +7893,7 @@ function patchElementAndDocument() {
     //       return get?.call(this)
     //     },
     //     set: function (value) {
-    //       const currentAppName = getCurrentAppName()
+    //       const currentAppName = this.__MICRO_APP_NAME__ || getCurrentAppName()
     //       if (currentAppName && appInstanceMap.has(currentAppName)) {
     //         const app = appInstanceMap.get(currentAppName)
     //         value = CompletionPath(value, app!.url)
@@ -7057,6 +7902,43 @@ function patchElementAndDocument() {
     //     },
     //   })
     // })
+    rawDefineProperty(rawRootNode.prototype, 'parentNode', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            var _a, _b, _c;
+            /**
+             * hijack parentNode of html for with sandbox
+             * Scenes:
+             *  1. element-ui@2/lib/utils/popper.js
+             *    // root is child app window, so root.document is proxyDocument or microDocument
+             *    if (element.parentNode === root.document) ...
+            */
+            const currentAppName = getIframeCurrentAppName() || getCurrentAppName();
+            if (currentAppName && this === globalEnv.rawDocument.firstElementChild) {
+                const microDocument = (_c = (_b = (_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow) === null || _c === void 0 ? void 0 : _c.document;
+                if (microDocument)
+                    return microDocument;
+            }
+            // NOTE: run after hijack html.parentNode
+            const result = globalEnv.rawParentNodeDesc.get.call(this);
+            /**
+             * If parentNode is <micro-app-body>, return rawDocument.body
+             * Scenes:
+             *  1. element-ui@2/lib/utils/vue-popper.js
+             *    if (this.popperElm.parentNode === document.body) ...
+             * WARNING:
+             *  Will it cause other problems ?
+             *  e.g. target.parentNode.remove(target)
+             * BUG:
+             *  1. vue2 umdMode, throw error when render again (<div id='app'></div> will be deleted when render again ) -- Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
+             */
+            // if (isMicroAppBody(result) && appInstanceMap.get(this.__MICRO_APP_NAME__)?.container) {
+            //   return document.body
+            // }
+            return result;
+        },
+    });
     rawDefineProperty(rawRootElement.prototype, 'innerHTML', {
         configurable: true,
         enumerable: true,
@@ -7065,50 +7947,26 @@ function patchElementAndDocument() {
         },
         set(code) {
             globalEnv.rawInnerHTMLDesc.set.call(this, code);
-            const currentAppName = getCurrentAppName();
+            const currentAppName = this.__MICRO_APP_NAME__ || getIframeCurrentAppName() || getCurrentAppName();
             Array.from(this.children).forEach((child) => {
                 if (isElement(child) && currentAppName) {
-                    child.__MICRO_APP_NAME__ = currentAppName;
+                    updateElementInfo(child, currentAppName);
                 }
             });
         }
     });
-    /**
-     * NOTE:Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
-     */
-    // rawDefineProperty(Node.prototype, 'parentNode', {
-    //   configurable: true,
-    //   enumerable: true,
-    //   get () {
-    //     const result = globalEnv.rawParentNodeDesc.get.call(this)
-    //     /**
-    //      * If parentNode is <micro-app-body>, return rawDocument.body
-    //      * Scenes:
-    //      *  1. element-ui@2/lib/utils/vue-popper.js
-    //      *    if (this.popperElm.parentNode === document.body) ...
-    //      * WARNING:
-    //      *  Will it cause other problems ?
-    //      *  e.g. target.parentNode.remove(target)
-    //      * BUG:
-    //      *  1. vue2 umdMode, throw error when render again (<div id='app'></div> will be deleted when render again )
-    //      */
-    //     if (isMicroAppBody(result) && appInstanceMap.get(this.__MICRO_APP_NAME__)?.container) {
-    //       return document.body
-    //     }
-    //     return result
-    //   },
-    //   set: undefined,
-    // })
+    // patch cloneNode
+    rawRootNode.prototype.cloneNode = function cloneNode(deep) {
+        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
+        return updateElementInfo(clonedNode, this.__MICRO_APP_NAME__);
+    };
 }
 /**
  * Mark the newly created element in the micro application
  * @param element new element
  */
 function markElement(element) {
-    const currentAppName = getCurrentAppName();
-    if (currentAppName)
-        element.__MICRO_APP_NAME__ = currentAppName;
-    return element;
+    return updateElementInfo(element, getCurrentAppName());
 }
 // methods of document
 function patchDocument$2() {
@@ -7126,14 +7984,15 @@ function patchDocument$2() {
         const element = globalEnv.rawCreateElementNS.call(getBindTarget(this), namespaceURI, name, options);
         return markElement(element);
     };
-    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
-        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
-        return markElement(element);
-    };
+    // TODO: 放开
     // rawRootDocument.prototype.createTextNode = function createTextNode (data: string): Text {
     //   const element = globalEnv.rawCreateTextNode.call(getBindTarget(this), data)
     //   return markElement(element)
     // }
+    rawRootDocument.prototype.createDocumentFragment = function createDocumentFragment() {
+        const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
+        return markElement(element);
+    };
     rawRootDocument.prototype.createComment = function createComment(data) {
         const element = globalEnv.rawCreateComment.call(getBindTarget(this), data);
         return markElement(element);
@@ -7146,7 +8005,7 @@ function patchDocument$2() {
         if (!currentAppName ||
             !selectors ||
             isUniqueElement(selectors) ||
-            // see https://github.com/micro-zoe/micro-app/issues/56
+            // ISSUE: https://github.com/micro-zoe/micro-app/issues/56
             rawDocument !== _this) {
             return globalEnv.rawQuerySelector.call(_this, selectors);
         }
@@ -7237,16 +8096,18 @@ function releasePatchElementAndDocument() {
     removeDomScope();
     releasePatchDocument();
     const rawRootElement = globalEnv.rawRootElement;
-    rawRootElement.prototype.appendChild = globalEnv.rawAppendChild;
-    rawRootElement.prototype.insertBefore = globalEnv.rawInsertBefore;
-    rawRootElement.prototype.replaceChild = globalEnv.rawReplaceChild;
-    rawRootElement.prototype.removeChild = globalEnv.rawRemoveChild;
+    const rawRootNode = globalEnv.rawRootNode;
+    rawRootNode.prototype.appendChild = globalEnv.rawAppendChild;
+    rawRootNode.prototype.insertBefore = globalEnv.rawInsertBefore;
+    rawRootNode.prototype.replaceChild = globalEnv.rawReplaceChild;
+    rawRootNode.prototype.removeChild = globalEnv.rawRemoveChild;
+    rawRootNode.prototype.cloneNode = globalEnv.rawCloneNode;
     rawRootElement.prototype.append = globalEnv.rawAppend;
     rawRootElement.prototype.prepend = globalEnv.rawPrepend;
-    rawRootElement.prototype.cloneNode = globalEnv.rawCloneNode;
     rawRootElement.prototype.querySelector = globalEnv.rawElementQuerySelector;
     rawRootElement.prototype.querySelectorAll = globalEnv.rawElementQuerySelectorAll;
     rawRootElement.prototype.setAttribute = globalEnv.rawSetAttribute;
+    rawDefineProperty(rawRootNode.prototype, 'parentNode', globalEnv.rawParentNodeDesc);
     rawDefineProperty(rawRootElement.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
 }
 // Set the style of micro-app-head and micro-app-body
@@ -7277,15 +8138,18 @@ function initGlobalEnv() {
         const rawRootElement = rawWindow.Element;
         const rawRootNode = rawWindow.Node;
         const rawRootEventTarget = rawWindow.EventTarget;
+        const rawDocumentFragment = rawWindow.DocumentFragment;
         // save patch raw methods, pay attention to this binding
+        const rawAppendChild = rawRootNode.prototype.appendChild;
+        const rawInsertBefore = rawRootNode.prototype.insertBefore;
+        const rawReplaceChild = rawRootNode.prototype.replaceChild;
+        const rawRemoveChild = rawRootNode.prototype.removeChild;
         const rawSetAttribute = rawRootElement.prototype.setAttribute;
-        const rawAppendChild = rawRootElement.prototype.appendChild;
-        const rawInsertBefore = rawRootElement.prototype.insertBefore;
-        const rawReplaceChild = rawRootElement.prototype.replaceChild;
-        const rawRemoveChild = rawRootElement.prototype.removeChild;
         const rawAppend = rawRootElement.prototype.append;
         const rawPrepend = rawRootElement.prototype.prepend;
-        const rawCloneNode = rawRootElement.prototype.cloneNode;
+        const rawFragmentAppend = rawDocumentFragment.prototype.append;
+        const rawFragmentPrepend = rawDocumentFragment.prototype.prepend;
+        const rawCloneNode = rawRootNode.prototype.cloneNode;
         const rawElementQuerySelector = rawRootElement.prototype.querySelector;
         const rawElementQuerySelectorAll = rawRootElement.prototype.querySelectorAll;
         const rawInsertAdjacentElement = rawRootElement.prototype.insertAdjacentElement;
@@ -7294,8 +8158,8 @@ function initGlobalEnv() {
         // Document proto methods
         const rawCreateElement = rawRootDocument.prototype.createElement;
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
-        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateTextNode = rawRootDocument.prototype.createTextNode;
+        const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateComment = rawRootDocument.prototype.createComment;
         const rawQuerySelector = rawRootDocument.prototype.querySelector;
         const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
@@ -7303,13 +8167,10 @@ function initGlobalEnv() {
         const rawGetElementsByClassName = rawRootDocument.prototype.getElementsByClassName;
         const rawGetElementsByTagName = rawRootDocument.prototype.getElementsByTagName;
         const rawGetElementsByName = rawRootDocument.prototype.getElementsByName;
-        const ImageProxy = new Proxy(Image, {
+        // TODO: 将ImageProxy移出去
+        const ImageProxy = new Proxy(rawWindow.Image, {
             construct(Target, args) {
-                const elementImage = new Target(...args);
-                const currentAppName = getCurrentAppName();
-                if (currentAppName)
-                    elementImage.__MICRO_APP_NAME__ = currentAppName;
-                return elementImage;
+                return updateElementInfo(new Target(...args), getCurrentAppName());
             },
         });
         /**
@@ -7335,6 +8196,7 @@ function initGlobalEnv() {
             rawRootDocument,
             rawRootElement,
             rawRootNode,
+            rawDocumentFragment,
             // source/patch
             rawSetAttribute,
             rawAppendChild,
@@ -7343,6 +8205,8 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawFragmentAppend,
+            rawFragmentPrepend,
             rawCloneNode,
             rawElementQuerySelector,
             rawElementQuerySelectorAll,
@@ -7380,7 +8244,7 @@ function initGlobalEnv() {
 /**
  * define element
  * @param tagName element name
- */
+*/
 function defineElement(tagName) {
     class MicroAppElement extends HTMLElement {
         constructor() {
@@ -7447,6 +8311,13 @@ function defineElement(tagName) {
         // baseRoute: route prefix, default is ''
         // keep-alive: open keep-alive mode
         connectedCallback() {
+            /**
+             * In FireFox, iframe Node.prototype will point to native Node.prototype after insert to document
+             * If <micro-app>.prototype is not MicroAppElement.prototype, we should reset it
+             */
+            if (Object.getPrototypeOf(this) !== MicroAppElement.prototype) {
+                Object.setPrototypeOf(this, MicroAppElement.prototype);
+            }
             const cacheCount = ++this.connectedCount;
             this.connectStateMap.set(cacheCount, true);
             /**
@@ -7508,8 +8379,7 @@ function defineElement(tagName) {
             if (this.legalAttribute(attr, newVal) &&
                 this[attr === ObservedAttrName.NAME ? 'appName' : 'appUrl'] !== newVal) {
                 if (attr === ObservedAttrName.URL && (!this.appUrl ||
-                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
-                )) {
+                    !this.connectStateMap.get(this.connectedCount))) {
                     newVal = formatAppURL(newVal, this.appName);
                     if (!newVal) {
                         return logError(`Invalid attribute url ${newVal}`, this.appName);
@@ -7518,13 +8388,11 @@ function defineElement(tagName) {
                     this.handleInitialNameAndUrl();
                 }
                 else if (attr === ObservedAttrName.NAME && (!this.appName ||
-                    !this.connectStateMap.get(this.connectedCount) // TODO: 这里的逻辑可否再优化一下
-                )) {
+                    !this.connectStateMap.get(this.connectedCount))) {
                     const formatNewName = formatAppName(newVal);
                     if (!formatNewName) {
                         return logError(`Invalid attribute name ${newVal}`, this.appName);
                     }
-                    // TODO: 当micro-app还未插入文档中就修改name，逻辑可否再优化一下
                     if (this.cacheData) {
                         microApp.setData(formatNewName, this.cacheData);
                         this.cacheData = null;
@@ -7579,12 +8447,12 @@ function defineElement(tagName) {
                         /**
                          * url is different & old app is unmounted or prefetch, create new app to replace old one
                          */
-                        logWarn(`the ${oldApp.isPrefetch ? 'prefetch' : 'unmounted'} app with url: ${oldAppUrl} replaced by a new app with url: ${targetUrl}`, this.appName);
+                        logWarn(`the ${oldApp.isPrefetch ? 'prefetch' : 'unmounted'} app with url ${oldAppUrl} replaced by a new app with url ${targetUrl}`, this.appName);
                     }
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`app name conflict, an app named: ${this.appName} with url: ${oldAppUrl} is running`);
+                    logError(`app name conflict, an app named ${this.appName} with url ${oldAppUrl} is running`);
                 }
             }
             else {
@@ -7828,6 +8696,7 @@ function defineElement(tagName) {
                 }
                 else {
                     // get path from browser URL
+                    // TODO: 新版本路由系统要重新兼容ssr
                     let targetPath = getNoHashMicroPathFromURL(this.appName, baseUrl);
                     const defaultPagePath = this.getDefaultPage();
                     if (!targetPath && defaultPagePath) {
@@ -7855,7 +8724,10 @@ function defineElement(tagName) {
          * @returns router-mode
          */
         getMemoryRouterMode() {
-            return getRouterMode(this.getAttribute('router-mode'), this);
+            return initRouterMode(this.getAttribute('router-mode'), 
+            // is micro-app element set disable-memory-router, like <micro-app disable-memory-router></micro-app>
+            // or <micro-app disable-memory-router='false'></micro-app>
+            this.compatibleProperties('disable-memory-router') && this.compatibleDisableProperties('disable-memory-router'));
         }
         /**
          * rewrite micro-app.setAttribute, process attr data
@@ -7881,6 +8753,17 @@ function defineElement(tagName) {
                 globalEnv.rawSetAttribute.call(this, key, value);
             }
         }
+        /**
+         * get delay time of router event
+         * @returns delay time
+         */
+        getRouterEventDelay() {
+            let delay = parseInt(this.getAttribute('router-event-delay'));
+            if (isNaN(delay)) {
+                delay = parseInt((isFunction(microApp.options['router-event-delay']) ? microApp.options['router-event-delay'](this.appName) : microApp.options['router-event-delay']));
+            }
+            return !isNaN(delay) ? delay : 0;
+        }
         /**
          * Data from the base application
          */
@@ -7904,8 +8787,20 @@ function defineElement(tagName) {
             }
             return null;
         }
+        /**
+         * get publicPath from a valid address,it can used in micro-app-devtools
+         */
+        get publicPath() {
+            return getEffectivePath(this.appUrl);
+        }
+        /**
+         * get baseRoute from attribute,it can used in micro-app-devtools
+         */
+        get baseRoute() {
+            return this.getBaseRouteCompatible();
+        }
     }
-    globalEnv.rawWindow.customElements.define(tagName, MicroAppElement);
+    window.customElements.define(tagName, MicroAppElement);
 }
 
 /**
@@ -7937,7 +8832,7 @@ function preFetch(apps, delay) {
         const delayTime = isNumber(delay) ? delay : microApp.options.prefetchDelay;
         /**
          * TODO: remove setTimeout
-         * Is there a better way?
+         * 如果要保留setTimeout，则需要考虑清空定时器的情况
          */
         setTimeout(() => {
             // releasePrefetchEffect()
@@ -7982,9 +8877,22 @@ function preFetchAction(options) {
                 });
                 const oldOnload = app.onLoad;
                 const oldOnLoadError = app.onLoadError;
-                app.onLoad = (html) => {
+                app.onLoad = (onLoadParam) => {
+                    if (app.isPrerender) {
+                        assign(onLoadParam, {
+                            defaultPage: options['default-page'],
+                            /**
+                             * TODO: 预渲染支持disable-memory-router，默认渲染首页即可，文档中也要保留
+                             * 问题：
+                             *  1、如何确保子应用进行跳转时不影响到浏览器地址？？pure？？
+                             */
+                            routerMode: initRouterMode(options['router-mode']),
+                            baseroute: options.baseroute,
+                            disablePatchRequest: options['disable-patch-request'],
+                        });
+                    }
                     resolve();
-                    oldOnload.call(app, html, options['default-page'], options['disable-patch-request'], getRouterMode(options['router-mode']), options.baseroute);
+                    oldOnload.call(app, onLoadParam);
                 };
                 app.onLoadError = (...rests) => {
                     resolve();
@@ -8015,7 +8923,7 @@ function getGlobalAssets(assets) {
 // TODO: requestIdleCallback for every file
 function fetchGlobalResources(resources, suffix, sourceHandler) {
     if (isArray(resources)) {
-        const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !sourceHandler.hasInfo(path));
+        const effectiveResource = resources.filter((path) => isString(path) && isTargetExtension(path, suffix) && !sourceHandler.hasInfo(path));
         const fetchResourcePromise = effectiveResource.map((path) => fetchSource(path));
         // fetch resource with stream
         promiseStream(fetchResourcePromise, (res) => {
@@ -8159,7 +9067,7 @@ function unmountApp(appName, options) {
             }
         }
         else {
-            logWarn(`app ${appName} does not exist`);
+            logWarn(`app ${appName} does not exist when unmountApp`);
             resolve(false);
         }
     });
@@ -8189,7 +9097,7 @@ function reload(appName, destroy) {
             }
         }
         else {
-            logWarn(`app ${appName} does not exist`);
+            logWarn(`app ${appName} does not exist when reload app`);
             resolve(false);
         }
     });
@@ -8282,7 +9190,7 @@ class MicroApp extends EventCenterForBaseApp {
             }
         }
         initGlobalEnv();
-        if (globalEnv.rawWindow.customElements.get(this.tagName)) {
+        if (window.customElements.get(this.tagName)) {
             return logWarn(`element ${this.tagName} is already defined`);
         }
         if (isPlainObject(options)) {