Разница между конструктором и connectedCallback в пользовательских элементах v1

Как уже сказал Джувиан в комментариях:

• constructor() вызывается при создании элемента.
• connectedCallback() вызывается, когда (после) элемент присоединяется к DOM.

Вызов constructor() не специфичен для Пользовательские элементы, это происходит при создании любого объекта (обычно создаваемого с помощью оператора new), а не только HTML-элементов.

В вызове constructor() вы можете создать Shadow DOM, но вы не можете добавлять узлы внутри обычного DOM, а также не можете добавлять или устанавливать атрибуты.

О обновлении:

Обновление происходит, когда неизвестный тег, объявленный в HTML-коде, определяется впоследствии (методом customElements.define()). «Неизвестный» элемент становится «настраиваемым» элементом. Затем вызываются методы constructor() и connectedCallback().

Примечание: когда элемент создается (как неизвестный), а затем определяется, он обновляется только после присоединения.

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>

Попробуйте разные комбинации с приведенным выше фрагментом:

• Затем выполните: 1 Создать - 2 Присоединить - 3 Определить
• Затем выполните: 1 Создать - 2 Определить - 3 Прикрепить
• Затем выполните: 1 Определить - 2 Создать - 3 Присоединить