Skip to content

How should we handle components with fragments? #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dobromir-hristov opened this issue Mar 26, 2020 · 5 comments
Closed

How should we handle components with fragments? #19

dobromir-hristov opened this issue Mar 26, 2020 · 5 comments

Comments

@dobromir-hristov
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Contributor Author

dobromir-hristov commented Mar 26, 2020

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
Copy link
Member

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
Copy link
Contributor Author

dobromir-hristov commented Mar 28, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants