Re: [WICG/webcomponents] Need a callback for when children changed or parser finished parsing children (#809)

After playing around a little bit, the mutation observer really seems like the best option for the component to be aware of its children.

```js
<script>
  window.customElements.define(
    'elmt-container',
    class extends HTMLElement {
      observeMutations() {
        const callback = (mutationList, observer) => {
          for (const mutation of mutationList) {
            if (mutation.type === 'childList') {
              if (mutation.addedNodes) {
                if (mutation.addedNodes[0] instanceof HTMLElement) {
                  console.log('A child node has been added:')
                  console.log(mutation.addedNodes[0])
                }
              }
            }
          }
        }
        const observer = new MutationObserver(callback)
        this.observer = observer
        const config = { childList: true, subtree: true }
        observer.observe(this, config)
      }
      disconnectedCallback() {
        const observer = this.observer
        observer.disconnect()
      }
      constructor() {
        super()
        this.observeMutations()
      }
    }
  )
  window.customElements.define('elmt-test', class extends HTMLElement {})
</script>

<elmt-container>
  <div>1</div>
  <elmt-test>2</elmt-test>
  <div><span>3</span></div>
</elmt-container>
```
The funny thing is that this still doesn't signal when the parser "finished first pass" or whatever. So instead the CustomElement has to carefully count/wait/expect the child nodes that it depends on.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/809#issuecomment-1457119856
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/809/1457119856@github.com>

Received on Monday, 6 March 2023 22:30:51 UTC