Description
Describe the bug
I'm seeing unexpected (to me) ordering of event handlers, and while the bug could be in my understanding rather than Svelte, I'd still like to correct it if that's the case.
To Reproduce
I've set up a small repro in this REPL. If you click outside the blue div, you'll see a series of messages that ends with "outside." If you click inside it, you'll see "inside." But if you click directly on the chevron, it will still show "outside" because by the time the click handler is looking at it, it's been removed from the DOM by the conditional layout.
Expected behavior
In the bigger picture I'm trying to detect clicks outside of the colored div, and that can be accomplished in other ways, but I'm struggling to understand what's happening in the event loop here. By await-ing a tick() in the buttonClickHandler function, my understanding is that the body's click handler should get called before control returns to the button's. But if you look at the console, the button swap is happening before the body click.
(The outcome here is that by the time the body click is looking at it's target, it's already been removed from the DOM, and so we can't meaningfully investigate it's place in the hierarchy.)
Severity
This is more annoying and puzzling than problematic... there are easy workarounds for what I'm actually trying to accomplish, but I want to make sure my mental models of await and the event loop are correct.