InViewObserver.js

export const eventName = 'in view'
export const tagName = 'inview-observer'

const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        const target = entry.target
        target.dispatchEvent(new Event('in view'))
    })
}, { threshold: 0.25 })

class InViewObserver extends HTMLElement {
    connectedCallback() {
        io.observe(this)
    }
    disconnectedCallback() {
        io.unobserve(this)
    }
}

customElements.define(
    tagName,
    InViewObserver,
    { extends: 'div' }
)

export default InViewObserver