Merge branch 'dev'

docs/zh-cn/changelog.md

@@ -8,6 +8,13 @@
 
 ---
 
+### 1.0.0-rc.12
+
+`2024-9-30`
+
+- **Feature**
+  - 子应用支持 web Component
+
 
 ### 1.0.0-rc.11
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "1.0.0-rc.11",
+  "version": "1.0.0-rc.12",
   "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",

src/libs/utils.ts

@@ -185,6 +185,15 @@ export function isMicroAppHead(target: unknown): target is HTMLElement {
   return isElement(target) && target.tagName.toUpperCase() === 'MICRO-APP-HEAD'
 }
 
+export function isWebComponentElement(target: unknown): boolean {
+  let result = toTypeString(target) === '[object HTMLElement]'
+  if (result) {
+    const tagName = (target as HTMLElement).tagName.toUpperCase()
+    result = result && !tagName.startsWith('MICRO-APP')
+  }
+  return result
+}
+
 // is ProxyDocument
 export function isProxyDocument(target: unknown): target is Document {
   return toTypeString(target) === '[object ProxyDocument]'

src/sandbox/adapter.ts

@@ -11,9 +11,6 @@ import {
   getPreventSetState,
   throttleDeferForIframeAppName,
   isAnchorElement,
-  isImageElement,
-  isVideoElement,
-  isAudioElement,
 } from '../libs/utils'
 import {
   appInstanceMap,
@@ -170,10 +167,6 @@ export function updateElementInfo <T> (node: T, appName: string | null): T {
         }
       }
     }
-    if (isImageElement(node) || isVideoElement(node) || isAudioElement(node)) {
-      // @ts-ignore
-      node.crossOrigin = 'anonymous'
-    }
     rawDefineProperties(node, props)
 
     /**

src/sandbox/iframe/document.ts

@@ -12,6 +12,7 @@ import {
   isUniqueElement,
   isInvalidQuerySelectorKey,
   throttleDeferForIframeAppName,
+  isWebComponentElement,
 } from '../../libs/utils'
 import globalEnv from '../../libs/global_env'
 import bindFunctionToRawTarget from '../bind_function'
@@ -86,7 +87,10 @@ function patchDocumentPrototype (appName: string, microAppWindow: microAppWindow
     tagName: string,
     options?: ElementCreationOptions,
   ): HTMLElement {
-    const element = rawMicroCreateElement.call(this, tagName, options)
+    let element = rawMicroCreateElement.call(this, tagName, options)
+    if (isWebComponentElement(element)) {
+      element = rawMicroCreateElement.call(rawDocument, tagName, options)
+    }
     return updateElementInfo(element, appName)
   }