on-load with web components

example.js

var onload = require('./')

var el = document.createElement('div')
el = onload(el, function (a) {
  console.log('mounting', a)
}, function (a) {
  console.log('unmounting', a)
})

var b = document.body
setTimeout(function () {
  b.appendChild(el)
}, 500)

setTimeout(function () {
  b.removeChild(el)
}, 1500)

console.log('booted')

index.js

module.exports = function (el, onload, onunload) {
  var wrapper = document.createElement('on-connected-listener')
  wrapper.onload = onload
  wrapper.onunload = onunload
  wrapper.appendChild(el)
  return wrapper
}

customElements.define('on-connected-listener', class Listener extends HTMLElement {
  connectedCallback () {
    this.onload && this.onload(this.firstChild)
  }
  disconnectedCallback () {
    this.onunload && this.onunload(this.firstChild)
  }
})