A simple DOM observer which API compatible to sentinel-js
<script src="https://unpkg.com/winkblue/dist/winkblue.umd.js"></script>
<script>
const { winkblue } = Winkblue;
// or
const winkblue = new Winkblue.Winkblue();
// or
const winkblue = Winkblue.Winkblue.new();
</script><script type="importmap">
{
"imports": {
"winkblue": "https://esm.sh/winkblue"
}
}
</script>
<script type="module">
import { winkblue } from 'winkblue';
// or
import { Winkblue } from 'winkblue';
const winkblue = new Winkblue();
// or
import { Winkblue } from 'winkblue';
const winkblue = Winkblue.new();
</script>// Start observing elements by class
winkblue.on('.dynamic-load-components', (el) => {
// do something on `el`
});
// Stop observing elements by class
winkblue.off('.dynamic-load-components');
// Stop observing all elements
winkblue.reset();// triggers callback if the element had been removed then attached back on document
// default: false
winkblue.options.forgetHiddenElement = true;- sentinel-js can not find the
display: none;elements. - sentinel-js can not trigger multiple times if multiple selectors match the same element.
- sentinel-js can not work with multiple instances.
- if you reuse the same element instance, the callback will not be triggered unless you set
options.forgetHiddenElementtotrue