redundant ref="[object Object]" attribute rendered in custom element on SSR

[kingyue737]

Vue version

v3.5.26@aac7e18

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9Uk1PwzAM/StRLh1S6Q5wKgMJ0CRAfAk45lJ17hponSpxYWjqf8dxN+gByCWJn5/z8uytPu+67L0HnetFKL3tSAWgvjszaNvOeVJ3n5eOTwhIqvKuVUk2n8SSE4MGF/ORzDS+ELRdUxDwTanFtMCcQ4v5BNepplA6rOw6ew0OWcc2sowumWQb8A8dWYfB6FwJErGiadzHjcTI95Du42UN5dsv8dewiTGjHz0E8O9g9DdGhV8DjfDy+R42fP4GW7fqG87+B3yC4Jo+ahzTLnpcsexJnqi9Fjctrl/CckOAYf+pKDRmDpJvNDcj+vXX13/kHmXHwjM4sIsTlzMKbOOufVu1gsqi1BQ0VXWqQi2inqBSw66r/G4Suwcb4TGr6BvZp+yZCMGihVwly7IuPIVElFuswVs6J/IhV1XRhNF/GafZwf4H3OtAyjtH6nQiY3YgcxQzPBM8KqacygDFVc+S9vMwjsQ4dOm+3Eiocqm4czwuiwj+6uXulmXWwI+MIuMa4lOj33LUwxd+Zf66

Steps to reproduce

When I use template ref on a custom element in SSR mode. It will render a ref="[object Object]" attribute unexpectedly:

<my-component ref="[object Object]">hello</my-component>

What is expected?

<my-component>hello</my-component>

What is actually happening?

<my-component ref="[object Object]">hello</my-component>

System Info

Any additional comments?

originally posted in nuxt/nuxt#34016
The reproduction on Vue playground is provided by @danielroe

[edison1105]

It should be:

export default defineComponent({
  name: 'Echarts',
  inheritAttrs: false,
  setup() {
    const root = shallowRef();
    return () =>
      h('my-component', {
-        ref: root,
+        ref: root.value,
        innerHTML: 'hello',
      });
  },
});

see Playground

[kingyue737]

🤔But this will result in a type error, since ref expects a VNodeRef.

I tested in Playground. ref:root.value does not work. console.log prints null.

[danielroe]

here's an example of it being used with a ref:

core/packages/vue/__tests__/e2e/Transition.spec.ts

Lines 2135 to 2147 in 3190b17

	Foo: {
	setup() {
	const el = ref(null)
	onMounted(() => {
	fooMountSpy(
	!!el.value,
	!!document.getElementById('foo'),
	!!document.getElementById('bar'),
	)
	})
	return () => h('div', { ref: el, id: 'foo' }, 'Foo')
	},

[Justineo]

It should be:

export default defineComponent({
  name: 'Echarts',
  inheritAttrs: false,
  setup() {
    const root = shallowRef();
    return () =>
      h('my-component', {
-        ref: root,
+        ref: root.value,
        innerHTML: 'hello',
      });
  },
});

see Playground

It should be a ref, not a value. The issue is that when we use a plain <div>, we do not get the unwanted ref="[object Object]" output. This only happens to custom elements.

[edison1105]

got distracted by the ref value and missed that it was actually a template ref. 😄