feat(runtime-dom): support async component in defineCustomElement

close #4261

packages/runtime-core/src/component.ts

@@ -293,7 +293,7 @@ export interface ComponentInternalInstance {
   /**
    * custom element specific HMR method
    */
-  ceReload?: () => void
+  ceReload?: (newStyles?: string[]) => void
 
   // the rest are only for stateful components ---------------------------------
 

packages/runtime-core/src/hmr.ts

@@ -136,13 +136,21 @@ function reload(id: string, newComp: ComponentOptions | ClassComponent) {
     if (instance.ceReload) {
       // custom element
       hmrDirtyComponents.add(component)
-      instance.ceReload()
+      instance.ceReload((newComp as any).styles)
       hmrDirtyComponents.delete(component)
     } else if (instance.parent) {
       // 4. Force the parent instance to re-render. This will cause all updated
       // components to be unmounted and re-mounted. Queue the update so that we
       // don't end up forcing the same parent to re-render multiple times.
       queueJob(instance.parent.update)
+      // instance is the inner component of an async custom element
+      // invoke to reset styles
+      if (
+        (instance.parent.type as ComponentOptions).__asyncLoader &&
+        instance.parent.ceReload
+      ) {
+        instance.parent.ceReload((newComp as any).styles)
+      }
     } else if (instance.appContext.reload) {
       // root instance mounted via createApp() has a reload method
       instance.appContext.reload()