Show HN: SentinelJS – Detect new DOM nodes using CSS selectors

Nice work! I&#x27;ve also done a similar thing (<a href="https:&#x2F;&#x2F;github.com&#x2F;rstacruz&#x2F;onmount" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rstacruz&#x2F;onmount</a>), and it&#x27;s really useful in managing behaviors in a page.<p>For those wondering what this is for, I&#x27;ve written a document with guidelines in building scalable non-SPA apps leveraging this: <a href="http:&#x2F;&#x2F;ricostacruz.com&#x2F;rsjs" rel="nofollow">http:&#x2F;&#x2F;ricostacruz.com&#x2F;rsjs</a>

Don&#x27;t we have mutation observers for this exact purpose? or is there a benefit to this approach?

How does it accomplish it in 680 bytes? I tried reading the code but don&#x27;t understand it.. there is a lot of stuff about css and keyframes that i don&#x27;t get.

Detailed write up of how it is implemented, and why mutation events are not suitable:<p><a href="http:&#x2F;&#x2F;www.backalleycoder.com&#x2F;2012&#x2F;04&#x2F;25&#x2F;i-want-a-damnodeinserted&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.backalleycoder.com&#x2F;2012&#x2F;04&#x2F;25&#x2F;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 &quot;animationstart&quot; 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&#x27;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&#x2F;my-components.js); color:blue; } </code></pre> and script:<p><pre><code> function MyComponent() { this &#x2F;&#x2F; is the element just added to the DOM. }</code></pre>

What&#x27;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?

If the author is watching this thread or anyone else. Would this work for elements not yet loaded by the browser before DOMContentLoaded?

I think, this is not a “shadow DOM-like,” but a “custom element-like experience.”

Great work!

on(), off() seems a bit unintuitive in my opinion. I&#x27;d opt for something like .watch(), .ignore()