Nice work! I've also done a similar thing (<a href="https://github.com/rstacruz/onmount" rel="nofollow">https://github.com/rstacruz/onmount</a>), and it's really useful in managing behaviors in a page.<p>For those wondering what this is for, I've written a document with guidelines in building scalable non-SPA apps leveraging this: <a href="http://ricostacruz.com/rsjs" rel="nofollow">http://ricostacruz.com/rsjs</a>
How does it accomplish it in 680 bytes? I tried reading the code but don't understand it.. there is a lot of stuff about css and keyframes that i don't get.
Detailed write up of how it is implemented, and why mutation events are not suitable:<p><a href="http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/" rel="nofollow">http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeins...</a>
The DOM element arrival detection is based on animation events in Sentinel. Sentinel adds global style rules that cause newly born elements to start animation and so generate "animationstart" event that the library catches.<p>That appears if not hacky then a bit heavyweight - 2 passes of layout needed at least.<p>But I do understand the need for this. In sciter I've added special CSS property aspect that takes name of the function to execute when element gets mounted into the DOM and before any layout on it:<p><pre><code> my-component {
aspect: MyComponent url(script/my-components.js);
color:blue;
}
</code></pre>
and script:<p><pre><code> function MyComponent() {
this // is the element just added to the DOM.
}</code></pre>
What's the difference between SentinelJS and DOM Mutation Observers?<p>I glanced at the source code, it seems this lib is using some kind of hack based on CSS animations. Why not just use Mutation Observers, which are the standard approved API to get the job done?
I might be missing a very obvious use-case here (3rd party scripts, perhaps?) but surely if a new DOM node is inserted, you most likely actioned it yourself - so why not set the innerHTML at that point?