Skip to content

Instantly share code, notes, and snippets.

@rniwa

rniwa/timing-of-connectedCallback-affected-by-presence-of-disconnectedCallback.html

Created August 15, 2018 03:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rniwa/537d2f7f29cc536f0731be1ff27258c8 to your computer and use it in GitHub Desktop.
Save rniwa/537d2f7f29cc536f0731be1ff27258c8 to your computer and use it in GitHub Desktop.
Download ZIP
Demo that the presence of disconnectedCallback can expedite an invocation of connectedCallback
Raw
timing-of-connectedCallback-affected-by-presence-of-disconnectedCallback.html
<!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