Skip to content

Commit

Permalink
fix(runtime-dom): support mounting app on ShadowRoot (#2447)
Browse files Browse the repository at this point in the history
fix #2399
  • Loading branch information
unbyte authored Dec 4, 2020
1 parent 338d869 commit b2189ba
Showing 1 changed file with 19 additions and 6 deletions.
25 changes: 19 additions & 6 deletions packages/runtime-dom/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
}

Expand All @@ -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)
Expand All @@ -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
Expand Down

0 comments on commit b2189ba

Please sign in to comment.