fix(sfc): inherit parent scopeId on child rooot (#756)

Author: hareku

packages/runtime-core/__tests__/helpers/scopeId.spec.ts

@@ -17,6 +17,27 @@ describe('scopeId runtime support', () => {
     expect(serializeInner(root)).toBe(`<div parent><div parent></div></div>`)
   })
 
+  test('should attach scopeId to components in parent component', () => {
+    const Child = {
+      __scopeId: 'child',
+      render: withChildId(() => {
+        return h('div')
+      })
+    }
+    const App = {
+      __scopeId: 'parent',
+      render: withParentId(() => {
+        return h('div', [h(Child)])
+      })
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(
+      `<div parent><div parent child></div></div>`
+    )
+  })
+
   test('should work on slots', () => {
     const Child = {
       __scopeId: 'child',
@@ -41,7 +62,7 @@ describe('scopeId runtime support', () => {
     // - scopeId from parent
     // - slotted scopeId (with `-s` postfix) from child (the tree owner)
     expect(serializeInner(root)).toBe(
-      `<div child><div parent child-s></div></div>`
+      `<div parent child><div parent child-s></div></div>`
     )
   })
 })

packages/runtime-core/src/componentRenderUtils.ts

@@ -39,6 +39,7 @@ export function renderComponentRoot(
 ): VNode {
   const {
     type: Component,
+    parent,
     vnode,
     proxy,
     withProxy,
@@ -102,6 +103,11 @@ export function renderComponentRoot(
     if (vnodeHooks !== EMPTY_OBJ) {
       result = cloneVNode(result, vnodeHooks)
     }
+    // inherit scopeId
+    const parentScopeId = parent && parent.type.__scopeId
+    if (parentScopeId) {
+      result = cloneVNode(result, { [parentScopeId]: '' })
+    }
     // inherit directives
     if (vnode.dirs != null) {
       if (__DEV__ && !isElementRoot(result)) {
@@ -127,6 +133,7 @@ export function renderComponentRoot(
     result = createVNode(Comment)
   }
   currentRenderingInstance = null
+
   return result
 }
 

packages/server-renderer/__tests__/renderToString.spec.ts

@@ -562,7 +562,7 @@ describe('ssr: renderToString', () => {
       }
 
       expect(await renderToString(h(Parent))).toBe(
-        `<div data-v-child><span data-v-test data-v-child-s>slot</span></div>`
+        `<div data-v-test data-v-child><span data-v-test data-v-child-s>slot</span></div>`
       )
     })
   })

packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts

@@ -26,6 +26,14 @@ describe('ssr: renderAttrs', () => {
     ).toBe(` id="foo" title="bar"`)
   })
 
+  test('empty value attrs', () => {
+    expect(
+      ssrRenderAttrs({
+        'data-v-abc': ''
+      })
+    ).toBe(` data-v-abc`)
+  })
+
   test('escape attrs', () => {
     expect(
       ssrRenderAttrs({

packages/server-renderer/src/helpers/ssrRenderAttrs.ts

@@ -53,7 +53,9 @@ export function ssrRenderDynamicAttr(
   if (isBooleanAttr(attrKey)) {
     return value === false ? `` : ` ${attrKey}`
   } else if (isSSRSafeAttrName(attrKey)) {
-    return ` ${attrKey}="${escapeHtml(value)}"`
+    return value === ''
+      ? ` ${attrKey}`
+      : ` ${attrKey}="${escapeHtml(value)}"`
   } else {
     console.warn(
       `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}`