Unterschied zwischen Konstruktor und connectedCallback in benutzerdefinierten Elementen v1

Question

Ich bin neu in der Webentwicklung und in letzter Zeit habe ich viele Diskussionen gesehen und über Custom Elements v1 gesprochen. Sie ermöglichen Ihnen, Ihre eigenen Elemente mit ihren eigenen benutzerdefinierten Verhaltensweisen zu definieren, und wenn Shadow DOM verwendet wird, mit Scoped-Stilen.

Als ich in this Website darüber lernte, habe ich die Tabelle unter "Benutzerdefinierte Element Reaktionen" nicht verstanden. Kann jemand bitte den Unterschied zwischen der Verwendung von "constructor" und "connectedCallback" sowie den Begriffen "created or upgraded" und "into the DOM" erklären?

Für zusätzliche Informationen ist die Definition meines benutzerdefinierten Elements in einer separaten Datei und es verwendet Shadow-DOM. Ich habe HTML-Import verwendet, um die Definition des Elements in das Hauptdokument zu importieren.

Answer 1

Wie bereits von Juvian in den Kommentaren angegeben:

• constructor() aufgerufen wird, wenn das Element erstellt ist.
• connectedCallback() wird aufgerufen, wenn (nach) das Element an das DOM angehängt ist.

Der constructor() Anruf ist auf kundenspezifische Elemente, die nicht spezifisch, es mit jeder Objekterstellung auftritt (in der Regel mit den new Betreibern erstellt wird), und nicht nur HTML-Elemente.

Im Aufruf constructor() können Sie das Schatten-DOM erstellen, aber Sie können keine Knoten innerhalb des normalen DOM hinzufügen, und Sie können auch keine Attribute hinzufügen oder festlegen.

über Upgrade:

Die Upgrade tritt auf, wenn ein unbekannter Tag in dem HTML-Code angegeben werden danach definiert wird (von der customElements.define() Methode). Das Element "unbekannt" wird zu einem "benutzerdefinierten" Element. Die Methoden constructor() und connectedCallback() werden dann aufgerufen.

Hinweis: Wenn ein Element erstellt (als unknow) und dann definiert wird, wird es nur aktualisiert, wenn es angehängt ist.

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>

Probieren Sie verschiedene Kombinationen mit dem obigen Auszug:

• Run dann: 1 Erstellen - 2 Bringen - 3 Definieren
• Run dann: 1 Erstellen - 2 definieren - 3 Anfügen
• Starten Sie dann: 1 Definieren - 2 Erstellen - 3 Anfügen