Ancestors

Written by Mayank on 2025-01-27 at 22:24

is there a way to listen to the "opening" of top-layer elements without patching globals?

i want to run some code whenever a <dialog> or popover opens.

(sorry if i'm out of the loop)

[#]WebDev #HTML #JavaScript

=> More informations about this toot | More toots from mayank@front-end.social

Written by Nathan Knowler on 2025-01-27 at 22:47

@mayank The captured toggle and beforetoggle events? I don’t believe it works into shadow roots though. It also runs for <details>, so there would need to be some kind of filter. And I’m also not sure if runs for non-modal dialogs (update: it does). Could match the event target against :modal, :popover-open.

=> More informations about this toot | More toots from knowler@sunny.garden

Written by Nathan Knowler on 2025-01-28 at 01:45

@mayank … a certain browser doesn’t dispatch these yet for <dialog>.

=> More informations about this toot | More toots from knowler@sunny.garden

Toot

Written by Mayank on 2025-01-28 at 01:46

@knowler does it bubble in browsers that do?

=> More informations about this toot | More toots from mayank@front-end.social

Descendants

Written by Nathan Knowler on 2025-01-28 at 01:47

@mayank No bubbling in any supporting browser.

=> More informations about this toot | More toots from knowler@sunny.garden

Written by Mayank on 2025-01-28 at 01:48

@knowler then it won't be as useful. i want to know when anything enters top layer

=> More informations about this toot | More toots from mayank@front-end.social

Written by Mayank on 2025-01-28 at 16:39

@knowler i totally missed the "capture" in your first response. this might actually work

for shadow-roots i guess i can patch attachShadow since everyone already patches that

=> More informations about this toot | More toots from mayank@front-end.social

Written by Nathan Knowler on 2025-01-28 at 16:44

@mayank The latter would work for programmatically created shadow roots. For complete support, in order to get any DSD ones, you have to use an early called mutation observer (w/ childList + subtree), then observe new shadow roots as you find them.

I also explored capturing events in shadow roots and then re-dispatching them with composed: true (i.e. new ToggleEvent(event.type, {...event, composed: true})) so that only one event handler needed to be used.

=> More informations about this toot | More toots from knowler@sunny.garden

Written by Mayank on 2025-01-28 at 16:49

@knowler it feels like shadow-roots, at least open ones, need more observability for easily doing "global" things

this is yet another reason to avoid putting interactive elements inside shadow dom

=> More informations about this toot | More toots from mayank@front-end.social