From b2189ba2f3400ab6bf9ee75b56ac11e65f7bd061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=B4=9C=C9=B4=D0=B2=CA=8F=D1=82=E1=B4=87?=
 <i@shangyes.net>
Date: Sat, 5 Dec 2020 05:51:38 +0800
Subject: [PATCH] fix(runtime-dom): support mounting app on ShadowRoot (#2447)

fix #2399
---
 packages/runtime-dom/src/index.ts | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 5da7086f8e6..e5335238e90 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -58,7 +58,7 @@ export const createApp = ((...args) => {
   }
 
   const { mount } = app
-  app.mount = (containerOrSelector: Element | string): any => {
+  app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
     const container = normalizeContainer(containerOrSelector)
     if (!container) return
     const component = app._component
@@ -68,8 +68,10 @@ export const createApp = ((...args) => {
     // clear content before mounting
     container.innerHTML = ''
     const proxy = mount(container)
-    container.removeAttribute('v-cloak')
-    container.setAttribute('data-v-app', '')
+    if (container instanceof Element) {
+      container.removeAttribute('v-cloak')
+      container.setAttribute('data-v-app', '')
+    }
     return proxy
   }
 
@@ -84,7 +86,7 @@ export const createSSRApp = ((...args) => {
   }
 
   const { mount } = app
-  app.mount = (containerOrSelector: Element | string): any => {
+  app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
     const container = normalizeContainer(containerOrSelector)
     if (container) {
       return mount(container, true)
@@ -103,7 +105,9 @@ function injectNativeTagCheck(app: App) {
   })
 }
 
-function normalizeContainer(container: Element | string): Element | null {
+function normalizeContainer(
+  container: Element | ShadowRoot | string
+): Element | null {
   if (isString(container)) {
     const res = document.querySelector(container)
     if (__DEV__ && !res) {
@@ -111,7 +115,16 @@ function normalizeContainer(container: Element | string): Element | null {
     }
     return res
   }
-  return container
+  if (
+    __DEV__ &&
+    container instanceof ShadowRoot &&
+    container.mode === 'closed'
+  ) {
+    warn(
+      `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`
+    )
+  }
+  return container as any
 }
 
 // SFC CSS utilities