Senior LevelHTML & Semantic Web
What are the core lifecycle callbacks of Web Component Custom Elements?
❓ Interview Prompt: Explain Custom Element lifecycle callbacks: constructor(), connectedCallback(), disconnectedCallback(), attributeChangedCallback(), and observedAttributes.
Custom Elements provide 4 core lifecycle callbacks:
1
'constructor()': Called when element instance is created.
2
'connectedCallback()': Called when element is inserted into the DOM. Best place for rendering and attaching event listeners!
3
'disconnectedCallback()': Called when element is removed from the DOM. Place cleanup logic here!
4
'attributeChangedCallback(name, oldValue, newValue)': Called when attributes listed in static 'observedAttributes' getter change.
Code Implementation Example
javascript
class CustomWidget extends HTMLElement {
static get observedAttributes() { return ['theme']; }
connectedCallback() {
this.render();
}
disconnectedCallback() {
// Cleanup event listeners
}
attributeChangedCallback(name, oldVal, newVal) {
this.render();
}
}💡Custom Element lifecycle callbacks implementation.
🎯 Interview Key Takeaway
Use connectedCallback for DOM setup, disconnectedCallback for memory cleanup, and observedAttributes for reactive attribute updates.
#Lifecycle Callbacks#Web Components#Custom Elements#Senior
Back to all HTML & Semantic Web Questions→