theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
fix #2399
This commit is contained in:
ᴜɴвʏтᴇ 2020-12-05 05:51:38 +08:00 committed by GitHub
parent 338d869c70
commit b2189ba2f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/runtime-dom/src/index.ts
View File

@ -58,7 +58,7 @@ export const createApp = ((...args) => {
} }
const { mount } = app const { mount } = app
app.mount = (containerOrSelector: Element | string): any => { app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
const container = normalizeContainer(containerOrSelector) const container = normalizeContainer(containerOrSelector)
if (!container) return if (!container) return
const component = app._component const component = app._component
@ -68,8 +68,10 @@ export const createApp = ((...args) => {
// clear content before mounting // clear content before mounting
container.innerHTML = '' container.innerHTML = ''
const proxy = mount(container) const proxy = mount(container)
container.removeAttribute('v-cloak') if (container instanceof Element) {
container.setAttribute('data-v-app', '') container.removeAttribute('v-cloak')
container.setAttribute('data-v-app', '')
}
return proxy return proxy
} }
@ -84,7 +86,7 @@ export const createSSRApp = ((...args) => {
} }
const { mount } = app const { mount } = app
app.mount = (containerOrSelector: Element | string): any => { app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
const container = normalizeContainer(containerOrSelector) const container = normalizeContainer(containerOrSelector)
if (container) { if (container) {
return mount(container, true) 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)) { if (isString(container)) {
const res = document.querySelector(container) const res = document.querySelector(container)
if (__DEV__ && !res) { if (__DEV__ && !res) {
@ -111,7 +115,16 @@ function normalizeContainer(container: Element | string): Element | null {
} }
return res 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 // SFC CSS utilities