Web Components – 4 connectedCallback

Lets learn about component lifecycle.

following are the callback/api you will need to know 

  1. connectedCallback  – handler
  2. disconnectedCallback – handler
  3. adoptedCallback – handler
  4. attributeChangedCallback – handler
  5. observedAttributes – static getter

use of connectedCallbackHandler: 

generally all the inner HTML for a web component is defined here. below is the example

<script>
    class WebComponentExample extends HTMLElement{
        connectedCallback(){
            this.innerHTML = '<button>click me</button>'
        }
    }
    if(!customElements.get('web-component-example')){
        customElements.define('web-component-example',WebComponentExample);
    }
</script

when does connectedCallback gets called ?

to find this lets remove innerHTML and add an alert in connectedCallback

connectedCallback(){
            alert("in connectedCallback method");
}

now lets add this component to the body of the html

<body>
    <web-component-example></web-component-example>
</body>

now when we reload page, we should bee seeing an alert message.

what will happen when you remove <web-component-example> from body. lets try and check it out.

it turns out that no alert message is shown. but we are registering the component in our script right ? hmm.. whats happening ? lets find out.

lets add a constructor to our web component

<script>
    class WebComponentExample extends HTMLElement{
        constructor(){
            super();
            alert("in constructor");
        }
        connectedCallback(){
            alert("in connectedCallback method");
        }
    }
    if(!customElements.get('web-component-example')){
        customElements.define('web-component-example',WebComponentExample);
    }
</script>

lets refresh our page. nothing happened right ? so to understand better , open dev tools and type

document.createElement("web-component-example");

you should be seeing an alert. so when a component is created, constructor gets called

so when does then connectedComponent is called — its called when component is added to DOM. so to test this, type below code in dev tools

var a =  document.createElement('web-component-example');
document.body.append(a);

so on document.createElement, constructor gets called, when component is added to DOM , connectedCallback is called

connectedComponent vs constructor

main difference to be noted is in constructor, we will not be able to add innerHTML, and use inbuilt methods like getAttributes etc. these are all only available in connectedCallback. see the below example

<script>
    class WebComponentExample extends HTMLElement{
        constructor(){
            super();
            console.log("constructor - attribute value is "+ this.getAttribute('testAttribute'));
        }
        connectedCallback(){
            console.log("connectedCallback - attribute value is "+ this.getAttribute('testAttribute'));
        }
    }
    if(!customElements.get('web-component-example')){
        customElements.define('web-component-example',WebComponentExample);
    }
</script>

as we can see from below, in constructor attribute value is null where as in connectedCallback we were able to see value.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s