Using with shadow-dom doesn't trigger onload function

import bel from 'bel';

export default class MyApp extends HTMLElement {
  createdCallback() {
    let greeting = this.getAttribute('greeting');
    let html = bel`
      <div>
        <div id="quotes">
          <div class="header" onload=${() => console.log('test')}>
            ${greeting ? greeting : 'Hello!'}
            <content select="my-name"></content>
          </div>
          <div class="body">
            <content select="my-profile"></content>
          </div>
        </div>
      </div>
    `;

    this.createShadowRoot().appendChild(html);
  }
}

Which I use:

<my-app greeting='Hi'>
  <my-name>Hello</my-name>
  <my-profile>
    This is my profile
  </my-profile>
</my-app>

The DOM renders fine, but on load there is nothing in the console.

[shama]

Hmm that is a tough one since on-load only watches the document.body and AFAIK can’t observe mutations into shadow doms. We would need to observe the shadow root and there isn’t an interface provided for that.

It would probably be expensive to detect whether an element is within a shadow dom, as we’d need to traverse the parentNode on render.

We might be able to have on-load watch for shadow doms added, then observe each of those as well. I have no idea if that would work or how expensive it would be though.

[goto-bus-stop]

this is no longer an issue with nanohtml because it doesn’t include on-load anymore.