fix(codegen): script setup should not attempt to resolve native elements as component

fix #12674

src/compiler/codegen/index.ts

@@ -95,14 +95,15 @@ export function genElement(el: ASTElement, state: CodegenState): string {
       code = genComponent(el.component, el, state)
     } else {
       let data
-      if (!el.plain || (el.pre && state.maybeComponent(el))) {
+      const maybeComponent = state.maybeComponent(el)
+      if (!el.plain || (el.pre && maybeComponent)) {
         data = genData(el, state)
       }
 
       let tag: string | undefined
       // check if this is a component in <script setup>
       const bindings = state.options.bindings
-      if (bindings && bindings.__isScriptSetup !== false) {
+      if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
         tag =
           checkBindingType(bindings, el.tag) ||
           checkBindingType(bindings, camelize(el.tag)) ||

test/unit/modules/compiler/codegen.spec.ts

@@ -724,4 +724,20 @@ describe('codegen', () => {
       '"with(this){return _c(\'div\',[_c(Foo),_c(FooBar)],1)}"'
     )
   })
+
+  // #12674
+  it('component with bindings: should not resolve native elements', () => {
+    const ast = parse(`<div><form>{{ n }}</form></div>`, baseOptions)
+    optimize(ast, baseOptions)
+    const res = generate(ast, {
+      ...baseOptions,
+      bindings: {
+        form: BindingTypes.SETUP_CONST
+      }
+    })
+    expect(res.render).toMatch(`_c('form'`)
+    expect(res.render).toMatchInlineSnapshot(
+      "\"with(this){return _c('div',[_c('form',[_v(_s(n))])])}\""
+    )
+  })
 })