Re: [w3c/webcomponents] [feature request] change when upgrade/connected happens during parsing, so that it is the first event in the following microtask (#787)

> Or just check `isConnected`.

Ah, nice, thanks.

The following is the CustomEvent-based version, which I just realized works only with Custom Element children that cooperate (emit the event), and not with builtins:

```html
<!DOCTYPE html>
<html>
    <body>
        <script>
            let instanceCount = 0

            const childConnectedEvent = new CustomEvent('child-connected', { bubbles: false, composed: false })
            const childDisconnectedEvent = new CustomEvent('child-disconnected', { bubbles: false, composed: false })
                        
            class TestElement extends HTMLElement {
                constructor() {
                    super()
                    this.changeCount = 0
                    this.instanceNumber = ++instanceCount
                    this.__lastKnownParent = null
                    this.__childConnected = null
                    this.__childDisconnected = null
                }
                
                connectedCallback() {
                    this.__lastKnownParent = this.parentElement
                    this.__emitChildConnectedEvent()
                    this.__registerListeners()
                    this.style = 'display: block'
                }

                disconnectedCallback() {
                    this.__emitChildDisconnectedEvent()
                    this.__unregisterListeners()
                    this.__lastKnownParent = null
                }

                childConnectedCallback(child) {
                    console.log('CHILD CONNECTED CALLBACK')
                    this.changeCount++
                    this.appendChild(
                        document.createTextNode(
                            `child changed! Change count: ${ this.changeCount }, Child tag: <${child.tagName.toLowerCase()}>, Child number: ${ child.instanceNumber }`,
                        ),
                    )
                }

                __emitChildConnectedEvent() {
                    childConnectedEvent.element = this // re-use a single event object (is this okay?)
                    this.__lastKnownParent.dispatchEvent(childConnectedEvent)
                    childConnectedEvent.element = null
                }

                __emitChildDisconnectedEvent() {
                    childDisconnectedEvent.element = this // re-use a single event object (is this okay?)
                    this.__lastKnownParent.dispatchEvent(childDisconnectedEvent)
                    childDisconnectedEvent.element = null
                }

                __registerListeners() {
                    this.__childConnected = event => this.childConnectedCallback(event.element)
                    this.addEventListener('child-connected', this.__childConnected)

                    this.__childDisconnected = event => this.childDisconnectedCallback(event.element)
                    this.addEventListener('child-disconnected', this.__childDisconnected)
                }

                __unregisterListeners() {
                    this.removeEventListener('child-connected', this.__childConnected)
                    this.removeEventListener('child-disconnected', this.__childDisconnected)
                }
            }

            customElements.define('test-element', TestElement)

            setInterval(() => {
                document
                    .querySelector('test-element')
                    .appendChild(document.createElement('test-element'))

                console.log(' --- Test tree outside of the document:')
                // Nice! shows that nothing fires when the a tree is not in the document.
                const one = document.createElement('test-element')
                const two = document.createElement('test-element')
                const three = document.createElement('test-element')
                one.appendChild(two)
                two.appendChild(three)
            }, 1000)
        </script>
        <test-element>
            Test1
            <test-element>Test2</test-element>
            <test-element>Test3</test-element>
        </test-element>
    </body>
</html>
```

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

Received on Thursday, 31 January 2019 04:49:41 UTC