[FR] Multi-root component support for custom directives

[wenfangdu]

What problem does this feature solve?

With fragments support, components can potentially have more than one root node. When applied to a multi-root component, the directive will be ignored and the warning will be thrown.

Currently, custom directives like v-focus (which focuses an inner element) won't work on a multi-root component, can we add support for this use case?

const focus = async (el, containerVisible = true) => {
  if (containerVisible) {
    el = el.querySelector('input') ?? el.querySelector('textarea')

    await nextTick()

    el?.focus()
  }
}

createApp(App).directive('focus', {
  mounted(el, { value }) {
    focus(el, value)
  },
  updated(el, { value, oldValue }) {
    value === oldValue || focus(el, value)
  },
})

<!-- `v-cascader` is a multi-root component -->
<!--        👇 focus an inner input element currently is not possible -->
<v-cascader v-focus></v-cascader>

What does the proposed API look like?

Custom directives work on multi-root components.

[posva]

Can you open an RFC on the rfcs repository?

[wenfangdu]

I've found a pretty good workaround for this:

Before:

<!-- `v-cascader` is a multi-root component -->
<!--        👇 focus an inner input element currently is not possible -->
<v-cascader v-focus></v-cascader>

After:

<!-- `v-form-item` is a single-root component -->
<!-- put `v-focus` on it to focus an inner input element -->
<v-form-item v-focus>
  <v-cascader></v-cascader>
</v-form-item>

[renatodeleao]

@posva any suggestion to get some traction on this idea? I've used rfcs repo "discussions" tab, but had zero engagement, so either:

1. I didn't explain the problem properly — very likely (😅)
2. people just learned to live with the limitation, gave up, and added their own custom hacky workarounds — also very likely
3. the RFCs repo's discussions tab doesn't get much attention from the "user/consumer" community until an actual implementation is decided or posted by a core member, so not that good for the "ideation" phase.
4. Other?

Appreciate any input! Cheers 👋