Detaillierte Erläuterung des zugrunde liegenden Prinzips von defineCustomElement, hinzugefügt in vue3.2
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. 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. 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:
|
<<: Detaillierte Zusammenfassung der MySQL-SQL-Anweisungen zum Erstellen von Tabellen
>>: So verbinden Sie XShell und Netzwerkkonfiguration in CentOS7
Artikel empfehlen
Beispielcode für das Testskript für Indizes und Sperren auf den Isolationsebenen RR und RC
Grundlegende Konzepte Aktueller Lesevorgang und S...
TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)
Die Projektanforderungen lauten: Datum und Uhrzei...
Natives JS zum Erzielen eines Puzzle-Effekts
In diesem Artikel wird der spezifische Code von n...
Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild
Code kopieren Der Code lautet wie folgt: <Stil...
Lösung für das Timeout-Problem bei der Installation von Docker-Compose mit PIP
1: Installationsbefehl pip install docker-compose...
Beispielcode zur Implementierung eines Musikplayers mit nativem JS
Dieser Artikel stellt hauptsächlich den Beispielc...
Tutorial zur Migration von MySQL von phpstudy nach Linux
Projektzweck Migrieren Sie die Daten in MySQL 5.5...
HTML Mehrere spezielle Trennlinieneffekte
1. Grundlinien 2. Spezialeffekte (die Effekte sin...
So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu
Wie wir alle wissen, gibt es in Computern zwei Art...
JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts
Verwenden Sie Leinwand, um eine bunte Uhr zu schr...
Detaillierte Erläuterung der Nginx-Weiterleitungssocket-Portkonfiguration
Gängige Szenarien für die Weiterleitung von Socke...
Linux-Befehl „exa“ (bessere Dateianzeige als „ls“)
Installieren Befolgen Sie zur Installation die RE...
CocosCreator-Tutorial für den Einstieg: Erstellen Sie Ihr erstes Spiel mit TS
Inhaltsverzeichnis Prämisse TypeScript vs. JavaSc...
Beispielanalyse der MySQL-Benutzerrechteverwaltung
Dieser Artikel beschreibt das Beispiel der MySQL-...
Best Practices für die Entwicklung von Amap-Anwendungen mit Vue
Inhaltsverzeichnis Vorwort Asynchrones Laden Pake...