What problem does this feature solve?

I have encountered a situation where I needed to use the teleport feature to enhance ALL occurrences of a specific element on the page to make it more accessible.

To give a simple example, this could be like overlaying a vue component on top of an inaccessible image button on legacy website.

I had the idea to solve this using teleport and create a new button that would take over the old button and support accessible users by using the button class ".myInaccessibleButton".

Unfortunately the above solution did not solve my problem as currently the teleport is just meant to create a single instance, so my accessible button was just created on the first button and not all of them.

This feature request is not just for my own use, but I guess there could be other use cases where the user would require the teleport feature to actually be multiplied multiple times (like a v-for).

When thinking of this feature I thought of the following possible modification:

• This feature should be manually set and it would not be on by default (avoiding people inadvertedly setting it to
  or and creating millions of occurrence. In the example below I have suggested an extra parameter caller "multiple" as a boolean
• There MAY be a need (when multiple instances are created) to be able to know which instance is being interacted with. So I quickly thought of a simple way to define a ref for each teleport, or maybe an index or something similar.

Thank you for your time, and I am more for this issue to be closed if you guys think it is not useful to the rest of the community

What does the proposed API look like?

<Teleport
  to="<css>"
  mutliple="true"
  ref="teleportedRef" >
</Teleport>