search

webcomponents / custom-elements-everywhere

Custom Element + Framework Interoperability Tests.
https://custom-elements-everywhere.com
Other
1.19k stars 104 forks source link

Add new event test for frameworks breaking event bubbling. #2420

Open ChrisShank opened 2 months ago

ChrisShank commented 2 months ago

Some component frameworks (e.g. react, svelte 5, solid) use "synthetic event delegation" to invoke event handlers. When used in conjunction with custom elements that attach event handlers outside of these synthetic event systems this will subtly break usage ofevent.stopPropagation(). The proposal here is to add a new test to detect when this happens and ding component frameworks that don't comply.

This issue is spurred by a conversation with @KonnorRogers and @lukewarlow on twitter.

Examples of this in action(not to pick on anyone in particular):

KonnorRogers commented 2 months ago

Vue: (works as expected) https://play.vuejs.org/#eNp9Uk1PwzAM/StRTp1UdSA4Td3EhyYBQjCxSVxyCa3puqVJSJyxadp/x03pxgHtksR+zvN7cfb81tpsE4CPeO4LV1tkHjDYidC0L+oGTMAkGbDxhO2FZqw0RWhAY/YVwO3moKBA4xLBPwKi0YIPMlmW0w2VPNceQUMLFqou1oKnLIETFWNSgUOCH0Apw96NUyURtNiB1kPKLi9oz4edMtJEAUJjlURoI8y7rvFMkbdSs5vYbCz4by/IPBo7c8bKSmJtdDIQfDKXO7Zs2xI73erYhke6fHjsw1OOvjD6s66ylTeanirKJ1emsTVZeLUtrRd81BsTXBL191PMoQuQ9vliCcX6n/zKb9uc4DMHHtwG6LV6DKWrADt4On+BLZ2PYGPKoKj6DPgG3qjQauzK7oIuSfafuqj2sbHGYa2rhZ9uaXK+N9UKjUOJ9YLTf7k/Y/0k9yq7jvdolvzwA7XAzlU=

Svelte 5: (breaks) https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE0WQQUvEMBCF_0qYUwqlq9fSLXjwIHgQ1pvxEJNZN5hmYjJZKKX_3bSueAjhzUu-95gFzs5jhv5tgaAnhB4eYoQWeI6byFf0jFVnKslskyGb5CKPKijOyK9uQiosZSOOo1hUsGTKhIG774JpPqFHw5Skgo_CTEFB02lrH6_1ybPLjAE303hnvhS0QuIfSAjtMXE1n0S-UPFWBGKhY0SduspRYd1OK-7v6j0c_ovVasNv3F6zqhx1EBT2mONyC8EuM8WXRFF_anYUZLOOJz2LC3pPFVg_7YDhcKPVRUxk3dmhhZ5TwfV9_QF3TUYTQwEAAA==

React 18: (breaks) https://codepen.io/paramagicdev/pen/poXGVWw

React 19: (breaks) https://codepen.io/paramagicdev/pen/ZEdwoyX

Preact: (works as expected) https://codepen.io/paramagicdev/pen/rNEPvJd

NullVoxPopuli commented 1 month ago

Ember (works as expected) https://limber.glimdown.com/edit?c=M4UwLgKglgtiD2BXMAKFBKABAXgHyYG8AoTTAE3gGNE4A7MAOgEdEQAnATwGUQAbESmHhsUAIgBGyIbVHoSpTAwCGZMgFEAbiHoAZKMDDb2YyryiUA1qIA0mFCCx5C8hZiX82qUQElMwABZIvGSYtPBgbgAOkSBKbAyy8gC%2B6ADcREm2AIwADGlERABmiLSCUPC0mP5KtGT8AMJmlvZYxKQgDAbwkQAKbN1KAOZKYOW0GOlJBQA8hjCRvCMguPLTkmDSK67TwJE1mBWm5hbYBATVtQ1NFklJuFxKHFV8vPDTAPS7NVuYH%2BubRA%2BcwWS1wQA&format=gjs

ChrisShank commented 3 weeks ago

And solid (breaks): https://playground.solidjs.com/anonymous/b41491fe-ce5f-4060-9fb4-2b4ce7d37732