fix(compiler-ssr): should pass necessary tag names for dynamic v-bind

packages/compiler-ssr/__tests__/ssrElement.spec.ts

@@ -57,13 +57,27 @@ describe('ssr: element', () => {
  let _temp0
 
  _push(\`<textarea\${
- _ssrRenderAttrs(_temp0 = _ctx.obj)
+ _ssrRenderAttrs(_temp0 = _ctx.obj, \\"textarea\\")
  }>\${
  _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
  }</textarea>\`)
  }"
  `)
  })
+
+ test('should pass tag to custom elements w/ dynamic v-bind', () => {
+ expect(
+ compile(`<my-foo v-bind="obj"></my-foo>`, {
+ isCustomElement: () => true
+ }).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent) {
+ _push(\`<my-foo\${_ssrRenderAttrs(_ctx.obj, \\"my-foo\\")}></my-foo>\`)
+ }"
+ `)
+ })
  })
 
  describe('attrs', () => {

packages/compiler-ssr/src/transforms/ssrTransformElement.ts

@@ -60,6 +60,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
  // element
  // generate the template literal representing the open tag.
  const openTag: TemplateLiteral['elements'] = [`<${node.tag}`]
+ // some tags need to be pasesd to runtime for special checks
+ const needTagForRuntime =
+ node.tag === 'textarea' || node.tag.indexOf('-') > 0
 
  // v-bind="obj" or v-bind:[key] can potentially overwrite other static
  // attrs and can affect final rendering result, so when they are present
@@ -79,10 +82,12 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
  // assign the merged props to a temp variable, and check whether
  // it contains value (if yes, render is as children).
  const tempId = `_temp${context.temps++}`
- propsExp.arguments[0] = createAssignmentExpression(
- createSimpleExpression(tempId, false),
- props
- )
+ propsExp.arguments = [
+ createAssignmentExpression(
+ createSimpleExpression(tempId, false),
+ props
+ )
+ ]
  const existingText = node.children[0] as TextNode | undefined
  rawChildrenMap.set(
  node,
@@ -125,6 +130,10 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
  }
  }
 
+ if (needTagForRuntime) {
+ propsExp.arguments.push(`"${node.tag}"`)
+ }
+
  openTag.push(propsExp)
  }
  }
@@ -234,10 +243,14 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
  // dynamic key attr
  // this branch is only encountered for custom directive
  // transforms that returns properties with dynamic keys
+ const args: CallExpression['arguments'] = [key, value]
+ if (needTagForRuntime) {
+ args.push(`"${node.tag}"`)
+ }
  openTag.push(
  createCallExpression(
  context.helper(SSR_RENDER_DYNAMIC_ATTR),
- [key, value]
+ args
  )
  )
  }