[andres]

Yes. SentinelJS will trigger a watch for elements present when DOMContentLoaded fires and for elements added dynamically afterwards. In the Quickstart example, there's an element that is part of the initial HTML payload and a button to add more dynamically: https://jsfiddle.net/muicss/rbqLbjzf/

[spand]

Thanks for the response and sorry. Maybe I was not quite clear. I was attempting ask if it would trigger the event handler before DOMContentLoaded (relevant on big document where DOMContentLoaded takes 10 seconds to fire) Example on a timeline:

  0. Browser starts parsing the document
  1. Sentiel.js loads (ie. by blocking script tag)
  2. Handler is set for .my-component (ie. by inline script tag)
  3. Browser parses <div class="my-component" />
  4. Handler is fired for .my-component
  5. Browser parses rest of document
  6. DOMContentLoaded is fired.

Will the .my-component handler will always fire after DOMContentLoaded or have you experienced that it might happen before? I guess it reduces to the question if key-frame-handlers will fire before the document is fully loaded/rendered.

[andres]

Yes, it comes down to when animation events fire which I believe is after DOMContentLoaded.

In MUI we detect all elements present in the DOM when DOMContentLoaded fires using document.querySelectorAll() and then use SentinelJS to detect elements added after.