How should we handle components with fragments?

[dobromir-hristov]

As Vue 3 now allows having components with multiple root components, aka fragments, we need to figure out what to do with methods like:

• find
• findAll
• classes
• attributes
• text

Of course some of these will depend on the outcome of #17

I am testing some things out locally, and vm.$el does not work with multi root components.

[lmiller1990]

find/findAll: should be business as usual, I think. Eg:

<template>
  <div id="foo" />
  <div id="bar" />
</template>

find and findAll should be able to find all the children. What does $el return? Is there some way to access all the children (maybe vm.children)?

I think we drop classes on components, as well as attrs and text. Components don't have classes, DOM elements inside of components do.

[dobromir-hristov]

find and findAll would then have to search from the root element, not the component you have an instance reference to. So we cant expect chain find on VueWrapper instances.

$el returns a comment tag if no single root component exists.

[dobromir-hristov]

Did some more digging:
vm is a proxy and exposes a few properties, one of which el which points to vnode.el, but as I said, it points to an empty comment tag when working with fragments, as it points to the first available element.

I could not find a way to fetch all the children from the ComponentPublicInstance we have access to. See https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/componentProxy.ts#L78

[lmiller1990]

Seems like you found something since making this comment - are we able to have find work on components with multiple root nodes now?

[dobromir-hristov]

Yes, added a test for it
https://github.com/vuejs/vue-test-utils-next/pull/25/files#diff-7dcc2cb7981ded4a1daa7e62feea0c29R17