Handler violations, browser freezes when using Web Components

Describe the bug

I think this is a bug with Kit when using Shoelace web components but I am unsure where this stems from. The issue does not happen when using regular Svelte, even with Svelte REPL I’m unable to reproduce this issue.

I have thoroughly described the issue here https://github.com/shoelace-style/shoelace/issues/466 where the author of the Shoelace web components library replied with some notes.

I am unsure how to debug this. Maybe someone can help? But I can say the issue (handler violations) occur constantly. The browser would freeze for up to 10 seconds with a Verbose console log message like [Violation] 'focusin' handler took 6519ms

Logs No specific logs available, nothing comes up on dev server side

To Reproduce

1. Clone the repo at https://github.com/brgrz/sl-bugs
2. Run npm i
3. Run npm run dev, it will run the SvelteKit app at http://localhost:3000
4. Open Chrome + devtools, in Devtools->Console tab->select All issues (or Verbose)
5. Open the app, click the Open drawer button
6. Inside the drawer try clicking around on the whitespace, try clicking into the input and then onto the whitespace and so forth
7. You should be seeing instances of [Violation] ‘focusin’ handler took 6519ms in the Console (while this happens, the app will freeze preventing you to click on anything else)

Expected behavior No freezes, no violations/timeouts

Information about your SvelteKit Installation:

System: OS: Windows 10 10.0.19042 CPU: (8) ia32 Intel® Core™ i7-8565U CPU @ 1.80GHz Memory: 5.00 GB / 15.78 GB Binaries: Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE npm: 7.11.2 - C:\Program Files (x86)\nodejs\npm.CMD Browsers: Chrome: 91.0.4472.106 Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48) Internet Explorer: 11.0.19041.1 npmPackages: @sveltejs/kit: next => 1.0.0-next.113 svelte: ^3.38.2 => 3.38.2

• Chrome

Severity Quite severe

[geoffrich]

This was fixed in the Shoelace repo with https://github.com/shoelace-style/shoelace/commit/1c8a3ea7d245c5520567b09e48a6e50ff3315a7e so there isn’t anything for SK to do here. I recommend closing when a maintainer gets around to this.

[geoffrich]

@brgrz SvelteKit now removes the tabindex after focusing the document root.