-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: clarify on:event
usage
#10088
base: svelte-4
Are you sure you want to change the base?
docs: clarify on:event
usage
#10088
Conversation
Problem 1: The events emitted/forwarded were not listened for. Fix 1: Changed event names to show consistency amongst examples Problem 2: Why events need to be forwarded is unclear (on this page). `createEventDispatcher` docs does mention custom events dont bubble. But components also cannot listen to DOM events that do bubble. Fix 2: Clarified that components only listen to event from their direct children
|
added "or emitted"
``` | ||
|
||
> Components can only listen to events forwarded or emitted by their direct child components or elements. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not completly accurate, if you have something like
<div on:click={foo}
<Button />
</div>
and you click on the button then the foo
handler would also get notified. I'm not sure right now how to bring this nuance across.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think in this particular case, it works because DOM events bubble through DOM tree and "bypasses" the <Button>
component. So imo this would be an element directive not component directive.
But I noticed this doesn't trigger. https://svelte.dev/repl/404bf36cde154bceb7ac7b0852e89d66?version=4.2.8
<Wrapper on:input={foo}>
<Input on:input />
</Wrapper>
while if placeholder slot is <Input on:input />
then it works: https://svelte.dev/repl/31fdd56cc6754245a463033f910f14bb?version=4.2.8
Also just double checking when we use the word parent, do we refer to the component/page in which a component is instantiated, or do we simply mean in terms of hierarchy. Like in my REPL, is the parent of <Input>
the <App>
or <Wrapper>
?
on:event
usage
Problem 1: The events emitted/forwarded were not listened for.
Fix 1: Changed event names to show consistency amongst examples
Problem 2: Why events need to be forwarded is unclear (on this page).
createEventDispatcher
docs does mention custom events dont bubble. But components also cannot listen to DOM events that do bubble.Fix 2: Clarified that components only listen to event from their direct children
Please close #10087 as I tried to merge svelte-4 into main (my bad)
Svelte 5 rewrite
Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (
main
).If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is
svelte-4
and notmain
.Before submitting the PR, please make sure you do the following
feat:
,fix:
,chore:
, ordocs:
.Tests and linting
pnpm test
and lint the project withpnpm lint