Detaillierte Erläuterung des zugrunde liegenden Prinzips von defineCustomElement, hinzugefügt in vue3.2

Inhaltsverzeichnis

Webkomponenten

benutzerdefinierteElemente

Überblick

HTMLTemplateElement-Inhaltsvorlagenelement

Überblick
Gemeinsame Eigenschaften

Schattenwurzel

Überblick

Webkomponenten

Web Components ist eine Reihe verschiedener Technologien, mit denen Sie wiederverwendbare benutzerdefinierte Elemente (deren Funktionalität außerhalb Ihres Codes gekapselt ist) erstellen und in Ihren Webanwendungen verwenden können.

Es entspricht der nativen Methode des Browsers zum Definieren von Komponenten, ohne dass Komponentendefinitionen über Frameworks wie Vue oder React implementiert werden müssen.

benutzerdefinierteElemente

Überblick

customElements ist eine schreibgeschützte Eigenschaft des Window-Objekts. Die Schnittstelle gibt einen Verweis auf ein CustomElementRegistry-Objekt zurück, das zum Registrieren neuer benutzerdefinierter Elemente oder zum Abrufen von Informationen zu zuvor definierten benutzerdefinierten Elementen verwendet werden kann.

HTMLTemplateElement-Inhaltsvorlagenelement

Überblick

Das HTML-Element <template> ist ein Mechanismus zum Speichern clientseitiger Inhalte, die beim Laden der Seite nicht gerendert werden, aber anschließend zur Laufzeit mit JavaScript instanziiert werden können.
Stellen Sie sich eine Vorlage als einen Inhalt vor, der zur späteren Verwendung in einem Dokument gespeichert werden kann. Obwohl der Parser beim Laden der Seite den Inhalt des <template>-Elements verarbeitet, geschieht dies nur, um sicherzustellen, dass dieser Inhalt gültig ist. Der Elementinhalt wird nicht gerendert.

Gemeinsame Eigenschaften

Inhalt: Ruft den Inhalt des DocumentFragment-Elementfragments ab, das dem von document.createDocumentFragment() erstellten Elementfragment entspricht.

  <!-- Definieren Sie das Vorlagenfragment -->
  <Vorlagen-ID="Element-Vorlage">
    <div>Testvorlage</div>
  </Vorlage>

  <Skript>
    /* Holen Sie sich das Vorlagenfragment */
    const ele = document.getElementById('element-template')
    ele.content Instanz von DocumentFragment //true

    /* Erstelle ein HTML-Fragment über createDocumentFragment*/
    const div = document.createDocumentFragment('div')
    div-Instanz von DocumentFragment //true

    /* abschließend*/
    // Die auf HTML definierte Vorlage erhält ihren Inhalt, der dem von createDocumentFragment erstellten HTML-Fragment entspricht</script>

Schattenwurzel

Überblick

Die ShadowRoot-Schnittstelle der Shadow DOM API ist der Stammknoten eines DOM-Unterbaums, der getrennt vom Haupt-DOM-Baum des Dokuments gerendert wird.
Sie können eine Referenz auf ein Element abrufen, indem Sie dessen Eigenschaft Element.shadowRoot verwenden, vorausgesetzt, es wurde mit Element.attachShadow() im Modus „Öffnen“ erstellt.

Mounten Sie den Schatten-DOM über Element.attachShadow()

Vollständiger Democode

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
</Kopf>
<Text>

  <test-schatten-wurzel></test-schatten-wurzel>

  <Vorlagen-ID="templateEle">
    <Stil>
      .hauptsächlich{
        Farbe: #f00;
      }
    </Stil>
    <div Klasse="Haupt">
      Ich bin ein Vorlagenfragment<!-- Slots verwenden -->
      <slot name="header"></slot>
    </div>
  </Vorlage>
  <Test-Vorlage-Element>
    <!-- Slots definieren -->
    <Stil>
      .Slot{
        Farbe: RGB (87, 28, 223);
      }
    </Stil>
    <div class="slot" slot="header">Ich bin Slot</div>
  </test-template-ele>

  <!-- Lebenszyklustest -->
  <div id="VerschiebeDiv">
    <button id="add">Hinzufügen</button>
    <button id="update">Aktualisieren</button>
    <button id="move">Verschieben</button>
    <button id="remove">Löschen</button>
  </div>

  <!-- Einhängen über ist -->
  <div ist="test-is-com">
    <div>AAA</div>
  </div>


  <Skript>
    /* Benutzerdefinierte Webkomponenten */
    customElements.define('test-shadow-root', Klasse erweitert HTMLElement {
      /* Wenn die Komponente „test-shadow-root“ im DOM gemountet ist, führen Sie den Konstruktor aus*/
      Konstruktor() {
        super()
        const shadowRoot = this.attachShadow({mode: 'open'}) //Shadow-DOM an das angegebene Element anhängen
        // Wenn die Methode this.attachShadow() ausgeführt wird, wird shadowRoot im Konstruktor gemountet und kann über this aufgerufen werden. // Im offenen Modus kann das Shadow-Root-Element von außerhalb von js auf den Root-Knoten zugreifen. // Im geschlossenen Modus wird der Zugriff auf den geschlossenen Shadow-Root-Knoten von außerhalb von js verweigert. // console.log('execution', this)
        const div = Dokument.createElement('div')
        div.textContent = 'Ich bin der Inhalt von div'
        // shadowRoot.appendChild()
        // console.log('dies', dies.shadowRoot)
        shadowRoot.appendChild(div)
        // dies.shadowRoot === shadowRoot true
      }
    })

    /* HTMLTemplateElement über Vorlage anpassen */
    customElements.define('test-template-ele', Klasse erweitert HTMLElement {
      Konstruktor() {
        super()
        const temEle = document.querySelector('#temEle')
        const templateContent = temEle.content //HTML-Fragment abrufen // console.log('AA', templateContent instanceof DocumentFragment) //true
        // Vorlageninhalt
        // Erstellen Sie ein Schatten-DOM, um das Vorlagenfragment einzubinden const shadowRoot = this.attachShadow({mode: 'open'})
        // console.log('SchattenRoot', SchattenRoot)
        shadowRoot.appendChild(Vorlageninhalt)
      }
    })

    /* Erstellen Sie Webkomponenten mit JS und testen Sie Lebenszyklusfunktionen*/
      Klasse LifeCycle erweitert HTMLElement {
        static get observedAttributes() { //Sie müssen die Attribute der Komponente hinzufügen, um attributeChangedCallback auszulösen
          Rückgabewert ['c', 'l'];
        }

        Konstruktor() {
          super()
          const shadowRoot = this.attachShadow({Modus: 'offen'})
          const div = `<div>
            <header>Mein Kopf</header>
            <div>Inhalt</div>
            <footer>Ende</footer>
          </div>`
          shadowRoot.innerHTML = div
        }

        connectedCallback() { //Beim Hinzufügen console.log('add') ausführen
        }
        disconnectedCallback() {//Beim Löschen console.log('disconnectedCallback') ausführen
        }
        adoptierterCallback() {
          console.log('adoptierterRückruf')
        }
        attributeChangedCallback() { //Wenn das Attribut geändert wird, console.log('attributeChangedCallback')
        }
      }

      customElements.define('Test-Lebenszyklus', Lebenszyklus)

      const add = document.querySelector('#add')
      const update = document.querySelector('#update')
      const verschieben = document.querySelector('#verschieben')
      const entfernen = document.querySelector('#entfernen')
      const moveDiv = document.querySelector('#moveDiv')
      let testLifeDom = null

      Funktion Zufallszahl(min, max) {
        gibt Math.floor(Math.random() * (max - min + 1) + min) zurück;
      }

      add.addEventListener('klicken', () => {
        testLifeDom = document.createElement('test-life-cycle') //Erstellen Sie die oben definierte benutzerdefinierte Komponente // console.log('testLifeDom', testLifeDom)
        Dokument.Body.AnhängenUntergeordnetesElement(testLifeDom);
        testLifeDom.setAttribute('l', '100');
        testLifeDom.setAttribute('c', 'rot');
        console.log('Hinzufügen', testLifeDom)
      })

      update.addEventListener('klicken', () => {
        const div = '<div>Aktualisiert</div>'
        // console.log('aktualisieren', testLifeDom.shadowRoot.innerHTML)
        testLifeDom.shadowRoot.innerHTML = div
        testLifeDom.setAttribute('l', random(50, 200));
        testLifeDom.setAttribute('c', `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`);
      })

      verschieben.addEventListener('klicken', () => {
        console.log('Div verschieben', Div verschieben)
        moveDiv.appendChild(testLifeDom)
      })

      entfernen.addEventListener('klicken', () => {
        console.log('entfernen')
        Dokument.Body.RemoveChild(testLifeDom);
      })

      /*Komponenten über is einbinden*/

      customElements.define('test-is-com', Klasse erweitert HTMLDivElement {
        Konstruktor() {
          super()
          Konsole.log('mount', dieses.innerHTML)
          // Durch Mounten ist dies die aktuell gemountete Elementinstanz. Auf diese Weise können einige Operationen implementiert werden.}
      }, {erweitert: 'div'})

  </Skript>
</body>
</html>

Dies ist das Ende dieses Artikels über die zugrunde liegenden Prinzipien von defineCustomElement, das in vue3.2 hinzugefügt wurde. Weitere relevante Inhalte zu defineCustomElement in vue3.2 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Beispiel für die Implementierung des zugrunde liegenden Codes zur Simulation responsiver Prinzipien durch Vue
Das zugrunde liegende Implementierungsprinzip der bidirektionalen Vue-Datenbindung
Zusammenfassung der zugrunde liegenden Implementierungsprinzipien von Vue
Wie gut wissen Sie über die zugrunde liegenden Prinzipien von Vue?

<<: Detaillierte Zusammenfassung der MySQL-SQL-Anweisungen zum Erstellen von Tabellen

>>: So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7

Docker erstellt eine Jenkins+Maven-Plattform zum Erstellen und Bereitstellen von Code

Detaillierte Erläuterung des zugrunde liegenden Prinzips von defineCustomElement, hinzugefügt in vue3.2

Inhaltsverzeichnis

Webkomponenten

benutzerdefinierteElemente

Überblick

HTMLTemplateElement-Inhaltsvorlagenelement

Überblick

Gemeinsame Eigenschaften

Schattenwurzel

Überblick

Docker erstellt eine Jenkins+Maven-Plattform zum Erstellen und Bereitstellen von Code

Docker exec führt mehrere Befehle aus

Detaillierte Erklärung von BOM und DOM in JavaScript

Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows

Detaillierte Erklärung des Unterschieds zwischen run/cmd/entrypoint in Docker

Installationsprozess von Zabbix-Agent auf Kylin V10

Implementierung von HTTP- und HTTPS-Diensten mit Nginx-Reverse-Proxy für mehrere Domänennamen

So erweitern Sie die Festplattengröße einer virtuellen Maschine

Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

Docker-Zeitzonenproblem und Datenmigrationsproblem

Artikel empfehlen

So verwenden Sie die MySQL-Indexzusammenführung

MySQL-Unterabfragen und gruppierte Abfragen

Detaillierte Erklärung, wo die von Docker abgerufenen Bilder gespeichert werden

Detaillierte Erklärung dieser Referenz und benutzerdefinierter Eigenschaften in JavaScript

Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur

Docker-Container sichert regelmäßig die Datenbank und sendet sie an das angegebene Postfach (Designidee)

Detaillierte Erläuterung des Persistenzimplementierungsprinzips von Transaktionen in MySQL

So verwenden Sie CSS-Pseudoelemente, um den Stil mehrerer aufeinanderfolgender Elemente zu steuern

Problem beim doppelten Laden, wenn die Seite img src enthält

Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview

So stellen Sie npm so ein, dass Pakete aus mehreren Paketquellen gleichzeitig geladen werden

MySQL-Lösung zur funktionalen Indexoptimierung

JavaScript zum Erreichen eines einfachen Bildwechsels

Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack

Der praktische Prozess des Login-Status-Managements im vuex-Projekt