Directives do not work on <RouterLink custom>

[decademoon]

Reproduction

https://play.vuejs.org/#eNqVVNtu2zAM/RXBG+AUaKxdij4YSZB1K9YNu6Ebtod5D47NJGpkyZDoJEWQfx8lJY7TdRn2kAvJw8NDitImqnKhkjsbpZGoam2QbVhhIEd4Vddsy6ZGVyxeNhBnqgUY3SCYNprw4DhAXO4+ltd1EvIz1TL36HOWKcaSxkIvpAe70o3CXvyE0uKz6DzapZO+gS2MqJFZwKYetbU+CLV4q3XZFtw7dlU7sKv8GEX2DlRoZZEtr7Qs2ZCBZMMRfScW7yUkU63wB4jZHCkWTwhDGQMe5JAQMhCqWlJrZDE2aCWhHmYRzyK27Ls05vnIVWipTcoMlFk0eiMMFCiWwFbaLOygbSCQTcyB1DXwn5ylBqti9NyBmkiIccBbzTTlcAIJPrIHH6HS5v5GWKSf853z9ngDaIj9dgfakd/oCr4LWLUz3zvafYC1B4bp77ZqeFSit3HNz0P19DFJvbNzB/HZNmU/ncFIfZ3jPGUxj0mzJkEKFKYHTVuf9Yu+t7R4NIKuuIfbxmSuZjRjtDTb02c/fzHaMw04GQ8nHWbTr/Kabp1WVMl3mO0CVCBl3uN8h7k6dxbNEWubct6oejFLqC1+QIwvkpfJM17SVDreBGzVnxi9svT/jth92457TCBewhK1lraf1+JvJf4Aji+Ty+Q5l2LCiZ0LVcLaczvqLQ2U2kRLhzoVswdNupMQEsznGgUd+lGzuZR69d770DTQCi3mUCwe8d/ZdZD8xQB1t4ROc5ibGWAIX3/9BGv63wYrXTaS0CeCt2C1bJzGALtqVEmyOziv9p0/M6Fm3+z1GkHZfVNOqJ+Gx/uDfH2i9YPcl8lFZ4rdp8zt5PGqhRviMN4mj5UaeQjyo2hnB/2yd16/U7ysaOiOVfTUOGa6ABs2NzA9ZypfihklkFB3IXzxnKUuSCj3Qw/UuJCiWJC9R4dHi/aFfE9zRBOuk8s+Eu/k5/9uY/sbfE5I2w==

Steps to reproduce the bug

Click the reproduction link.

Expected behavior

The second link should be bold.

Actual behavior

The second link is not bold.

Additional information

I understand why this happens. Vue 3 does not support custom directives on components that render multiple root nodes. This is also the case if the render function returns an array of a single vnode since it'll get converted into a fragment.

This is the RouterLink render function:

router/packages/router/src/RouterLink.ts

Lines 309 to 327 in 14219b0

	return () => {
	const children = slots.default && slots.default(link)
	return props.custom
	? children
	: h(
	'a',
	{
	'aria-current': link.isExactActive
	? props.ariaCurrentValue
	: null,
	href: link.href,
	// this would override user added attrs but Vue will still add
	// the listener, so we end up triggering both
	onClick: link.navigate,
	class: elClass.value,
	},
	children
	)
	}

If custom is false then a single <a> element is the root element of the component and everything works as expected.

If custom is true then the result of calling the default slot function is returned instead. The vue template compiler will wrap the default slot in an array even if it only contains a single node, so it will become a fragment.

The only fix I can think of is to change the RouterLink render function so that the result of the default slot is unwrapped if it is an array of length 1:

function preferSingleVNode(vnodes) {
  return Array.isArray(vnodes) && vnodes.length === 1 ? vnodes[0] : vnodes;
}

const children = preferSingleVNode(slots.default && slots.default(link))

It's really unfortunate that Vue 3 cannot do something that Vue 2 was able to do: vuejs/core#3914

[posva]

The fix seems very reasonable. PR welcome!