onload handler being passed wrong el due to morphdom

Hey folks, I'm crossing my fingers that I'm posting the issue at the right level of the stack here, but I believe I've stumbled upon some unexpected functionality that has me perplexed, and I've attempted to isolate it.

const choo = require('choo')
const html = require('choo/html')

const app = choo()

app.router([
  ['/', HomeView],
  ['/about', AboutView]
])

const tree = app.start()
document.body.appendChild(tree)

function HomeView (state, prev, send) {
  return html`
    <div class="home" onload=${onLoad} onunload=${onUnload}>
      Home
      <a href="/about">About</a>
    </div>
  `

  function onLoad (el) {
    console.log('HomeView loaded', el)
  }
  function onUnload (el) {
    console.log('HomeView unloaded', el)
  }
}

function AboutView (state, prev, send) {
  return html`
    <div class="about">
      About
      <a href="/">Home</a>
    </div>
  `
}

Live demo

Open your console, then click "About," then click "Home." Hover over the elements it logs and you'll see that the final "HomeView loaded" log is passed an el that is not on the screen. In fact the onload handler is still dealing with the original el.

The real trouble, of course, is when you're trying to do something like initialise dragula when the view loads.

What's odd is that the onloadids appear to be correct... not sure what's going wrong. Any ideas?

choojs / nanohtml

onload handler being passed wrong el due to morphdom #61