wip: vapor mode#3386
Conversation
✅ Deploy Preview for vuejs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| <p class="actions"> | ||
| <a href="/guide/introduction#api-styles">Learn more</a> | ||
| <button @click="dismiss">Got it</button> | ||
| <button v-on="{ click: dismiss }">Got it</button> |
There was a problem hiding this comment.
In Vapor, delegated DOM events require the event to reach the document. If an ancestor uses native stopPropagation(), use v-on="{ click: handler }" to force a native listener for that element.
There was a problem hiding this comment.
I don’t think this is a good enough solution.
- The workaround is a bit unintuitive and hard to reason about just by looking at the code.
- The actual direct cause is not the component itself, but somewhere higher up in the component hierarchy. It’s not reasonable to assume that the component author would know the component might be wrapped in an ancestor that uses native
stopPropagation.
In this case, we successfully located the bug, but there could be many more edge cases elsewhere, and we can’t reliably find all of them with automated tools.
Is there any way to fix this on the Vapor side?
There was a problem hiding this comment.
This is a limitation of document-level event delegation. Vapor currently has the same behavior as Solid here: if an ancestor calls native stopPropagation(), the delegated handler never sees the event because it does not reach document.
Solid documents the same caveat here:
https://docs.solidjs.com/concepts/components/event-handlers#event-delegation-considerations
For this PR I changed this button to v-on="{ click: dismiss }", which forces a native listener and works in both VDOM and Vapor without changing propagation semantics.
We should document this limitation, and maybe consider adding a compiler option so component library authors can opt out of event delegation when needed.
|
@haoqunjiang fixed |

No description provided.