How can the script be guaranteed to run after loading all page elements, including dynamically loaded components?

Question

JavaScript

In a nutshell - there is a module for Magento 2 from Amasty - Mega Menu. In the latest versions of the update, the developers have done fundamental, an explicit turn of the module to the ui-component approach has been made.
Those. components are not rendered as before in the DOM, but are loaded dynamically using js as needed.
All this is very cool, but there is one problem. I have a custom javascript that affects menu items in the DOM. On new versions of the mega-menu of the module, this script is loaded earlier than ui-components, and due to the fact that before loading the script, some specified css selectors - classes, IDs - were still absent on the page, the script ignores these selectors and therefore does not work.
No manipulation of delaying the script until the page is fully loaded did not work - except for a strong timeout - at least 3 seconds, and this is not an option. It doesn't matter in which specific place to place the script, at the beginning or at the very end of the body. The only time the script works is if you run it from the console, or if you place it on a content page. In both cases, it is guaranteed to work after all components are loaded.
To solve this problem as "beautifully" as amasty updated their module, you need to write a pretty impressive plugin, and all this for the sake of a couple of small scripts that worked fine before this update.
Maybe there is some other way out? How else can I get the script to run after all the components are loaded?

Answer 1

I don’t know how about loading all components, but you can use MutationObserver to track the appearance of new elements on the page and, as soon as the blocks necessary for your script to work, immediately launch the script itself.
https://developer.mozilla.org/ru/docs/Web/API/Muta...