What problem does this feature solve?

I am using teleport to move dynamic contents to the footer DOM element on the page. I would like to not have to have an additional div inside the teleport component just to be able to style the contents, but to be able to apply CSS class directly on the target DOM element.

What does the proposed API look like?

I think the following should work <Teleport to="footer" class="red-background"> and result in <footer class="red-background">.

Why would Vue add classes to an element that is outside of its running scope? This seems like a very specific use case and it can be implemented in userland by looking for the element and adding the classes/attributes. Usually, you would just add the classes to the footer directly, without passing by the Teleport. What would happen when the teleport is removed? Are classes removed as well?

This doesn't seem to be needed in core, but if you believe otherwise, please open an RFC in the rfcs repo.

Why would Vue add classes to an element that is outside of its running scope?

Because it is adding DOM elements to it as well?

and it can be implemented in userland by looking for the element and adding the classes/attributes.

Hm, everything Teleport does could be seen like that, so I could be adding DOM elements to an element outside of Vue's scope manually and maintain them reactively. But it is very hard to do so manually. And Vue does it for you. Similarly here, Vue could maintain attributes on the target DOM element, add them when Teleport is created, update them if necessary with reactivity, and then remove them when the Teleport is destroyed.