feat(components): [el-message] & [el-notification] appendTo option added (#4012)

* feat(components): [el-message] & [el-notification] appendTo option added

* fix(components): unit test and replaced warn with debugWarn

packages/components/notification/src/notification.ts

@@ -76,7 +76,9 @@ export const notificationEmits = {
 }
 export type NotificationEmits = typeof notificationEmits
 
-export type NotificationOptions = Omit<NotificationProps, 'id'>
+export type NotificationOptions = Omit<NotificationProps, 'id'> & {
+  appendTo?: HTMLElement | string
+}
 export type NotificationOptionsTyped = Omit<NotificationOptions, 'type'>
 
 export interface NotificationHandle {

packages/components/notification/src/notify.ts

@@ -2,6 +2,7 @@ import { createVNode, render } from 'vue'
 import isServer from '@element-plus/utils/isServer'
 import PopupManager from '@element-plus/utils/popup-manager'
 import { isVNode } from '@element-plus/utils/util'
+import { debugWarn } from '@element-plus/utils/error'
 import NotificationConstructor from './notification.vue'
 import { notificationTypes } from './notification'
 
@@ -57,6 +58,22 @@ const notify: NotifyFn & Partial<Notify> = function (options = {}) {
     },
   }
 
+  let appendTo: HTMLElement | null = document.body
+  if (options.appendTo instanceof HTMLElement) {
+    appendTo = options.appendTo
+  } else if (typeof options.appendTo === 'string') {
+    appendTo = document.querySelector(options.appendTo)
+  }
+
+  // should fallback to default value with a warning
+  if (!(appendTo instanceof HTMLElement)) {
+    debugWarn(
+      'ElNotification',
+      'the appendTo option is not an HTMLElement. Falling back to document.body.'
+    )
+    appendTo = document.body
+  }
+
   const container = document.createElement('div')
 
   const vm = createVNode(
@@ -77,7 +94,7 @@ const notify: NotifyFn & Partial<Notify> = function (options = {}) {
   // instances will remove this item when close function gets called. So we do not need to worry about it.
   render(vm, container)
   notifications[position].push({ vm })
-  document.body.appendChild(container.firstElementChild!)
+  appendTo.appendChild(container.firstElementChild!)
 
   return {
     // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle