Created
August 15, 2018 03:25
-
-
Save rniwa/537d2f7f29cc536f0731be1ff27258c8 to your computer and use it in GitHub Desktop.
Demo that the presence of disconnectedCallback can expedite an invocation of connectedCallback
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<body> | |
<pre id="log"></pre> | |
<script> | |
function log(text) { | |
document.getElementById('log').textContent += `${text}\n`; | |
} | |
class ParentElement extends HTMLElement { | |
connectedCallback() { | |
const child1 = this.childNodes[0]; | |
const child2 = this.childNodes[1]; | |
log('Child1 removal begin'); | |
this.removeChild(child1); | |
log('Child1 removal end'); | |
this.appendChild(child1); | |
log('Child1 append end'); | |
log('Child2 removal begin'); | |
this.removeChild(child2); | |
log('Child2 removal end'); | |
this.appendChild(child2); | |
log('Child2 append end'); | |
} | |
} | |
customElements.define('parent-element', ParentElement); | |
class Child1 extends HTMLElement { | |
connectedCallback() { | |
log('Child1 connectedCallback isConnected=' + this.isConnected.toString()); | |
} | |
} | |
customElements.define('child-1', Child1); | |
class Child2 extends HTMLElement { | |
connectedCallback() { | |
log('Child2 connectedCallback isConnected=' + this.isConnected.toString()); | |
} | |
disconnectedCallback() { | |
log('Child2 disconnectedCallback isConnected=' + this.isConnected.toString()); | |
} | |
} | |
customElements.define('child-2', Child2); | |
const container = document.createElement('div'); | |
container.innerHTML = '<parent-element><child-1></child-1><child-2></child-2>'; | |
customElements.upgrade(container); | |
document.body.appendChild(container); | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment