diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts index c07bb0e5533..bc2c9686a6c 100644 --- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts @@ -836,6 +836,24 @@ describe('compiler: element transform', () => { }) }) + test('capitalized version w/ static binding', () => { + const { node, root } = parseWithBind(``) + expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT) + expect(node).toMatchObject({ + isBlock: true, + tag: { + callee: RESOLVE_DYNAMIC_COMPONENT, + arguments: [ + { + type: NodeTypes.SIMPLE_EXPRESSION, + content: 'foo', + isStatic: true + } + ] + } + }) + }) + test('dynamic binding', () => { const { node, root } = parseWithBind(``) expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT) diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 5c34c6d2eee..398758f4234 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -230,8 +230,9 @@ export function resolveComponentType( const { tag } = node // 1. dynamic component - const isProp = - node.tag === 'component' ? findProp(node, 'is') : findDir(node, 'is') + const isProp = isComponentTag(tag) + ? findProp(node, 'is') + : findDir(node, 'is') if (isProp) { const exp = isProp.type === NodeTypes.ATTRIBUTE @@ -413,7 +414,7 @@ export function buildProps( } } // skip :is on - if (name === 'is' && tag === 'component') { + if (name === 'is' && isComponentTag(tag)) { continue } properties.push( @@ -452,7 +453,7 @@ export function buildProps( // skip v-is and :is on if ( name === 'is' || - (isBind && tag === 'component' && isBindKey(arg, 'is')) + (isBind && isComponentTag(tag) && isBindKey(arg, 'is')) ) { continue } @@ -672,3 +673,7 @@ function stringifyDynamicPropNames(props: string[]): string { } return propsNamesString + `]` } + +function isComponentTag(tag: string) { + return tag[0].toLowerCase() + tag.slice(1) === 'component' +}