fix(runtime-dom): support mounting app on ShadowRoot (#2447)

fix #2399
vuejs · Dec 4, 2020 · b2189ba · b2189ba
1 parent 338d869
commit b2189ba
Showing 1 changed file with 19 additions and 6 deletions.
diff --git 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,15 +105,26 @@ 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) {
       warn(`Failed to mount app: mount target selector returned 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