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

ShadowRoot Event Handling #1

Open
Offroaders123 opened this issue Mar 31, 2023 · 0 comments
Open

ShadowRoot Event Handling #1

Offroaders123 opened this issue Mar 31, 2023 · 0 comments
Assignees
@Offroaders123
Labels
enhancement New feature or request

Comments

@Offroaders123
Copy link
Owner

This is a mirror/reference to another issue I wrote, which relates to how Menu Drop event handling works with the component's Shadow DOM.

ShadowRoot | HTMLElement Event Handling Interchangeability
@Offroaders123 Offroaders123 added the enhancement New feature or request label Mar 31, 2023
@Offroaders123 Offroaders123 self-assigned this Mar 31, 2023
Offroaders123 added a commit that referenced this issue Apr 3, 2023
@Offroaders123
Shadow Root Event Handlers Map
8010554 
When I did the original Legacy Types definitions for Menu-Drop a few commits ago, I had to change the component's Shadow Root event listeners over to ones bound to the component itself, as TypeScript didn't like me having events added to the Shadow Root.

Turns out this is because the events are receivable on the Shadow Root because of event bubbling, rather than being dispatched directly to the Shadow Root itself. TypeScript (nor the MDN docs) mention this as an option to take (not that it's unrecommended, it's just not mentioned anywhere plainly as an option you *could* take), so I'm not completely sure whether this is a good practice or not.

My original thoughts were that the Shadow Root can be thought of synonymously with the `document`, and that you could listen to the same events and such, on it. But properties like `onclick` aren't present on the Shadow Root, so it's not completely the same, come to find out. It's a bit wishy washy at the moment, so I'm just tidying up the code for that here, since the original codebase relied on that being structured that way because of the event handling `event.target` logic, and adding the events to the parent component element itself prevented it from working when I changed that in the types update.

I have more info about all of this in the issues I made for it here in the Menu-Drop repo itself, and the issue I made to help think this out, over in the Better-TypeScript repo.

#1
BenjaminAster/Better-TypeScript#2

Another note, this is correct in terms of TypeScript's perspective, this is not mentioned behavior anywhere in the documentation that I have seen. So it makes sense that TypeScript didn't add type definitions for Document-like event handling on Shadow Roots, because it wasn't mentioned anywhere as part of the spec (I'll need to dive into the actual spec itself, as it may actually be mentioned there. I was just talking about MDN and resources like that).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Offroaders123 Offroaders123

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Offroaders123