Skip to content
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.

Sign up for GitHub

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

Jump to bottom

docs: clarify on:event usage #10088

Open
wants to merge 2 commits into
base: svelte-4
Choose a base branch
from
Open

docs: clarify on:event usage #10088

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
888935d
docs: Update 06-component-directives.md on:event clarification
cloudymeatball Jan 4, 2024
ce69130
Update 06-component-directives.md
cloudymeatball Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 4 additions & 2 deletions documentation/docs/02-template-syntax/06-component-directives.md
View file
Open in desktop
Expand Up @@ -28,15 +28,17 @@ Components can emit events using [`createEventDispatcher`](/docs/svelte#createev
Listening for component events looks the same as listening for DOM events:

```svelte
<SomeComponent on:whatever={handler} />
<SomeComponent on:hello={helloHandler} on:click={clickHandler} />
```

As with DOM events, if the `on:` directive is used without a value, the event will be forwarded, meaning that a consumer can listen for it.

```svelte
<SomeComponent on:whatever />
<SomeComponent on:hello on:click />
```

> Components can only listen to events forwarded or emitted by their direct child components or elements.
Copy link
Member

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.

Copy link
Author

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>?


## --style-props

```svelte
Expand Down