Skip to content

wip: vapor mode#3386

Draft
edison1105 wants to merge 4 commits into
vuejs:mainfrom
edison1105:edison/feat/vaporMode
Draft

wip: vapor mode#3386
edison1105 wants to merge 4 commits into
vuejs:mainfrom
edison1105:edison/feat/vaporMode

Conversation

@edison1105
Copy link
Copy Markdown
Member

No description provided.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 22, 2026

Deploy Preview for vuejs ready!

Name Link
🔨 Latest commit 1a7613d
🔍 Latest deploy log https://app.netlify.com/projects/vuejs/deploys/69fb127d58fe6f00088541f3
😎 Deploy Preview https://deploy-preview-3386--vuejs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Member

@haoqunjiang haoqunjiang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image The "Got it" button is not clickable.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t think this is a good enough solution.

  1. The workaround is a bit unintuitive and hard to reason about just by looking at the code.
  2. 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?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@edison1105
Copy link
Copy Markdown
Member Author

@haoqunjiang fixed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants