Ancestors

Toot

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

Descendants

Written by Christopher Kirk-Nielsen on 2025-01-27 at 22:40

@mayank I am probably more out of the loop, but unless <dialog> has an open event, you could use a mutation observer for the open attribute. I have never used popover so I am utterly useless there, sorry!

=> More informations about this toot | More toots from chriskirknielsen@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

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

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

Written by Paul Foster on 2025-01-27 at 23:37

@mayank Like this? https://developer.chrome.com/blog/new-in-chrome-132?hl=en#dialog-toggle

=> More informations about this toot | More toots from plfstr@mastodon.social

Written by DoomyTheFroomy on 2025-01-28 at 05:53

@mayank I would try an Observer, perhaps the MutationObserver. But never tried! https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

=> More informations about this toot | More toots from DoomyTheFroomy@toot.berlin

Written by Hidde on 2025-01-28 at 06:11

@mayank don't think so, just the specific ones for toggling those elements, but nothing for 'enters/leaves the top layer'

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