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'
+}