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

Question

Я новичок в веб-разработке, и недавно я много дискутировал и рассказывал о Custom Elements v1. Они позволяют вам определять свои собственные элементы с их собственным пользовательским поведением и использовать Shadow DOM, с областью видимых стилей.

Когда я узнал об этом на сайте this, я не понял таблицу в разделе «Реакции пользовательских элементов». Может кто-нибудь объяснить разницу между использованием «конструктора» и «connectedCallback», а также термины «созданный или обновленный» и «вставленный в DOM» ?.

Для получения дополнительной информации определение моего пользовательского элемента находится в отдельном файле, и в нем используется теневая DOM. Я использовал HTML Import для импорта определения элемента в основной документ.

Answer 1

Как уже отмечалось на Juvian в комментариях:

• 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 Attach - 3 Определение
• Выполнить то: 1 Создать - 2 Определить - 3 Прикрепить
• Бег потом: 1 Определить - 2 Создать - 3 Прикрепить