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

fix(sfc/scoped-style): inherit scopeId through nested HOCs with inheritAttrs: false

Browse Source 
fix #1988
This commit is contained in:
Evan You
2020-09-01 18:56:02 -04:00
parent 5b82c48c7b
commit c0427b45ff
6 changed files with 120 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/runtime-core/src/componentRenderUtils.ts
View File

@@ -42,7 +42,6 @@ export function renderComponentRoot(
): VNode {
const {
type: Component,
parent,
vnode,
proxy,
withProxy,
@@ -172,22 +171,6 @@ export function renderComponentRoot(
}
}
// inherit scopeId
const scopeId = vnode.scopeId
// vite#536: if subtree root is created from parent slot if would already
// have the correct scopeId, in this case adding the scopeId will cause
// it to be removed if the original slot vnode is reused.
const needScopeId = scopeId && root.scopeId !== scopeId
const treeOwnerId = parent && parent.type.__scopeId
const slotScopeId =
treeOwnerId && treeOwnerId !== scopeId ? treeOwnerId + '-s' : null
if (needScopeId || slotScopeId) {
const extras: Data = {}
if (needScopeId) extras[scopeId!] = ''
if (slotScopeId) extras[slotScopeId] = ''
root = cloneVNode(root, extras)
}
// inherit directives
if (vnode.dirs) {
if (__DEV__ && !isElementRoot(root)) {

61
packages/runtime-core/src/renderer.ts
View File

@@ -745,15 +745,31 @@ function baseCreateRenderer(
}
}
// scopeId
if (scopeId) {
hostSetScopeId(el, scopeId)
}
const treeOwnerId = parentComponent && parentComponent.type.__scopeId
// vnode's own scopeId and the current patched component's scopeId is
// different - this is a slot content node.
if (treeOwnerId && treeOwnerId !== scopeId) {
hostSetScopeId(el, treeOwnerId + '-s')
}
setScopeId(el, scopeId, vnode, parentComponent)
// if (scopeId) {
// hostSetScopeId(el, scopeId)
// }
// if (parentComponent) {
// const treeOwnerId = parentComponent.type.__scopeId
// // vnode's own scopeId and the current patched component's scopeId is
// // different - this is a slot content node.
// if (treeOwnerId && treeOwnerId !== scopeId) {
// hostSetScopeId(el, treeOwnerId + '-s')
// }
// const parentScopeId =
// vnode === parentComponent.subTree && parentComponent.vnode.scopeId
// if (parentScopeId) {
// hostSetScopeId(el, parentScopeId)
// if (parentComponent.parent) {
// const treeOwnerId = parentComponent.parent.type.__scopeId
// // vnode's own scopeId and the current patched component's scopeId is
// // different - this is a slot content node.
// if (treeOwnerId && treeOwnerId !== parentScopeId) {
// hostSetScopeId(el, treeOwnerId + '-s')
// }
// }
// }
// }
}
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
Object.defineProperty(el, '__vnode', {
@@ -791,6 +807,33 @@ function baseCreateRenderer(
}
}
const setScopeId = (
el: RendererElement,
scopeId: string | false | null,
vnode: VNode,
parentComponent: ComponentInternalInstance | null
) => {
if (scopeId) {
hostSetScopeId(el, scopeId)
}
if (parentComponent) {
const treeOwnerId = parentComponent.type.__scopeId
// vnode's own scopeId and the current patched component's scopeId is
// different - this is a slot content node.
if (treeOwnerId && treeOwnerId !== scopeId) {
hostSetScopeId(el, treeOwnerId + '-s')
}
if (vnode === parentComponent.subTree) {
setScopeId(
el,
parentComponent.vnode.scopeId,
parentComponent.vnode,
parentComponent.parent
)
}
}
}
const mountChildren: MountChildrenFn = (
children,
container,