It adds a stylesheet to accept new stylerules. For every element set (CSS selector) you want to watch it adds a new stylerule that makes a no-op animation happen (transform:none -> transform:none). Every time such a node that matches your selector is added to the document, this animation is triggered. When this happens, Sentinel publishes an event to whatever handlers you ask it to, by listening to the 'AnimationStart' event emitted when an animation happens. Pretty clever, but simple, and I think this is not the first source to suggest this approach for watching DOM modification. Note, the unminified dist/sentinel.js is not 682 bytes!

it will break when browser optimize a null animation, just like tons of code used to detect if some ad was in view in the past broke.

edit: already happened once with this very project. they started animating clip, but then ie optimised it and now they use outlineColor.

Wow that is just super clever and I'm guessing super fast also since it is triggered by the browser. I was thinking more on the lines of comparing nodes using setInterval which would of course never work because it would be slow and CPU intensive!

Looks like it adds a keyframe animation to the elements, and when a child node is inserted that animation is triggered, and emits an event.

Am on my phone tho, so may have misread.

From the code, it adds `animationstart` event that will be fired for any newly injected DOM https://github.com/muicss/sentineljs/blob/master/src/sentine...

It adds a faux `animation` keyframe for the specified CSS selector.