fix(ssr): respect case when rendering dynamic attrs on svg

fix #6755
vuejs · Sep 27, 2022 · 121eb32 · 121eb32
1 parent 6958ec1
commit 121eb32
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -98,6 +98,17 @@ describe('ssr: renderAttrs', () => {
       )
     ).toBe(` fooBar="ok"`)
   })
+
+  test('preserve name on svg elements', () => {
+    expect(
+      ssrRenderAttrs(
+        {
+          viewBox: 'foo'
+        },
+        'svg'
+      )
+    ).toBe(` viewBox="foo"`)
+  })
 })
 
 describe('ssr: renderAttr', () => {

diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
@@ -1,4 +1,4 @@
-import { escapeHtml, stringifyStyle } from '@vue/shared'
+import { escapeHtml, isSVGTag, stringifyStyle } from '@vue/shared'
 import {
   normalizeClass,
   normalizeStyle,
@@ -51,8 +51,8 @@ export function ssrRenderDynamicAttr(
     return ``
   }
   const attrKey =
-    tag && tag.indexOf('-') > 0
-      ? key // preserve raw name on custom elements
+    tag && (tag.indexOf('-') > 0 || isSVGTag(tag))
+      ? key // preserve raw name on custom elements and svg
       : propsToAttrMap[key] || key.toLowerCase()
   if (isBooleanAttr(attrKey)) {
     return includeBooleanAttr(value) ? ` ${attrKey}` : ``