Child elements in webcomponent

The solution is to use a MutationObserver on the <list-image> custom element itself.

In the connectedCallback() method, observe mutations on child elements:

customElements.define('list-image', class extends HTMLElement {
  connectedCallback() {
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        //Detect <img> insertion
        if (mutation.addedNodes.length)
          console.info('Node added: ', mutation.addedNodes[0])
      })
    })

    observer.observe(this, { childList: true })
  }
})

function add() {
  document.querySelector('list-image')
          .insertAdjacentHTML('beforeend', '<img alt="TOTO" />')
}
<list-image>
  <img alt="Image1">
  <img alt="Image2">
</list-image>
<button onclick="add()">Add image</button>


Upadate, from this page: https://developers.google.com/web/fundamentals/web-components/examples/howto-tabs

New children will get slotted automatically and cause slotchange to fire, so not MutationObserver is needed.