feat: Expand support for targets

[lokesh]

I really enjoy using pseudo-window as an alternative to manually adding and destroying the top level event listeners. The additional support for document and body tags got me thinking about where else the component could go. What do you think about expanding the element targeting further and the having the component be a convenient way to target any html element outside the scope of the current component?

As an example:

// Could still default to targeting window as a way to hint at 
// the intended / most common usage. ditto is a fun working 
// title. But something not window specific might be good.
<ditto
    @keydown="onKey"
/>

<ditto
    target="document"
    @touchmove.prevent
>

<ditto
    target=".canvas-wrapper'
    class="block"
>

One scenario where the expanded targeting could be useful is if you run your Vue app alongside other non-Vue code, and targeting this other code requires reaching in to the DOM manually anyway. I don't have a specific use case.

Not sure if opening the door to bad practices around event handling is worth the trade-off to support the edge case of non-Vue app code.

[privatenumber]

I thought about this a lot and, yeah I agree it opens doors to bad practices.

This component is founded on the premise that sometimes, components need to manipulate the environment (window, document, body) to achieve desired behavior and doing so is not debt and should be supported declaratively by the Vue template API.

I suppose non-Vue code living by Vue code can be argued as environmental, but I'm currently going with the stance that it's debt and that making debt look "pretty" isn't constructive to the overall maintainability of the app.

Happy to reconsider if given some concrete examples, but personally haven't encountered any situations where I'd want to manipulate a non-environmental DOM element outside of the Vue app without feeling like I want to refactor it in the future.