Difference between constructor and connectedCallback in custom elements v1

Question

I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with scoped styles.

When I was learning about it in this site, I did not understand the table under "Custom element reactions". Can anyone please explain the difference between using the "constructor" and "connectedCallback" and also the terms "created or upgraded" and "inserted into the DOM"?.

For extra information, my custom element's definition is in a separate file and it uses shadow DOM. I used HTML Import to import the element's definition into the main document.

Answer 1

As already stated by Juvian in the comments:

• constructor() is called when the element is created.
• connectedCallback() is called when (after) the element is attached to the DOM.

The constructor() call is not specific to Custom Elements, it occurs with any object creation (typically created with the new operator), and not only HTML Elements.

In the constructor() call, you can create the Shadow DOM, but you can't add Nodes inside the normal DOM, and you can't add or set an attribute either.

About upgrade:

The upgrade occurs when an unknown tag declared in the HTML code is defined afterwards (by the customElements.define() method). The "unknown" element becomes a "custom" element. The constructor() and connectedCallback() methods are then called.

Note: when an element is created (as unknown), and then defined, it is upgraded only when attached.

class CE extends HTMLElement {
  constructor() {
    super()
    console.info( 'constructed' )
  }
  connectedCallback() {
    console.info( 'connected' )
    this.innerHTML = 'Hello'  //can't be set in constructor()
  }
}


B1.onclick = function () {
  ce = document.createElement( 'c-e' )
  ce.textContent = 'unknown'
}

B2.onclick = function () {
  document.body.appendChild( ce )
}

B3.onclick = function () {
  customElements.define( 'c-e', CE)  
}

<button id=B1>create</button>
<button id=B2>attach</button>
<button id=B3>define</button>

Try different combinations with the above snippet:

• Run then: 1 Create - 2 Attach - 3 Define
• Run then: 1 Create - 2 Define - 3 Attach
• Run then: 1 Define - 2 Create - 3 Attach