https://github.com/w3c/webcomponents/issues/787

by Joe Pea

HTML

<script>

  customElements.define('test-child', class extends HTMLElement {
    constructor() {
      super()
      this.foo = 'foo'
    }
  });

  customElements.define('test-parent', class extends HTMLElement {
    constructor() {
      super();
      this._observer = new MutationObserver(() => this.childChangedCallback());
      this._observer.observe(this, {childList: true});
    }

    childChangedCallback() {
      log.textContent += 'child changed!\n';
      for (const child of Array.from(this.children)) {
        log.textContent += child.foo + '\n'
      }
    }
  });
  
  document.body.insertAdjacentHTML('beforeend', `
  	<test-parent><test-child></test-child><test-child></test-child></test-parent>
  `)

  setTimeout(() => {
    document.querySelector('test-parent')
      .appendChild(document.createElement('test-child'));
  }, 1000);

</script>

<pre id="log"></pre>