Eine Einführung in rahmenlose Webkomponenten

Dieses Tutorial beschreibt, wie Sie Standard -Webkomponenten schreiben, ohne das JavaScript -Framework zu verwenden. Sie werden lernen, was sie sind und wie Sie sie in Ihren eigenen Webprojekten übernehmen können. Grundkenntnisse über HTML5, CSS und JavaScript sind erforderlich.

Schlüsselpunkte

• Webkomponenten ermöglichen die Erstellung von benutzerdefinierten HTML -Elementen mit Kapselungsstilen und -funktionalität, wodurch Konflikte und Abhängigkeiten zwischen verschiedenen Teilen des Projekts reduziert werden.
• Im Gegensatz zu JavaScript-Frameworks sind Webkomponenten leicht, benötigen keine externen Bibliotheken und sind für zukunftssicher ausgelegt und können in einer Vielzahl von Frameworks und Browsern ausgeführt werden.
• Shadow DOM bietet Scoped -Stile und DOM -Isolation, um zu verhindern, dass Stile außen außen und die Komponente durchlaufen und eine klare Trennung zwischen internen und globalen Stilen aufrechterhalten.
• Webkomponenten können mit HTML -Vorlagen und -Sponenten verbessert werden, was Flexibilität für die Inhaltsprojektion und Wiederverwendbarkeit bietet, ohne den JavaScript -Code für verschiedene Komponenteninstanzen zu ändern.
• deklaratives Shadow DOM ist eine aufkommende Funktion, mit der Shadow DOM aus serverseitigen Vorlagen erstellt werden kann, wodurch die Leistung verbessert wird, indem Layout-Offsets reduziert werden und nicht styled Inhalte flackern.
• Während Webkomponenten viele Vorteile haben, haben sie auch eine Lernkurve und fehlen einige der integrierten Funktionen, die im umfassenden Framework bereitgestellt werden, wie z. B. Datenbindung und staatliche Management-Tools.

Was sind Webkomponenten?

Idealerweise sollte Ihr Entwicklungsprojekt einfache, unabhängige Module verwenden. Jedes Modul sollte eine klare einzelne Verantwortung haben. Der Code ist eingekapselt: Sie müssen nur wissen, was bei einer Reihe von Eingabeparametern ausgegeben wird. Andere Entwickler müssen die Implementierung nicht überprüfen (es sei denn, es gibt natürlich Fehler).

Die meisten Sprachen fördern die Verwendung von Modulen und wiederverwendbarem Code, aber die Browserentwicklung erfordert eine Mischung aus HTML, CSS und JavaScript, um Inhalte, Stile und Funktionen zu rendern. Der verwandte Code kann in mehrere Dateien aufgeteilt und auf unerwartete Weise konflikt.

JavaScript -Frameworks und Bibliotheken wie React, Vue, Suflte und Angular haben einige der Schwierigkeiten gelindert, indem sie ihre eigenen Komponentierungsmethoden einführen. Verwandte HTML, CSS und JavaScript können zu einer einzelnen Datei kombiniert werden. Leider:

• Dies ist eine andere Sache zu lernen
• Framework wird sich weiterentwickeln, und Updates führen häufig dazu, dass Code Refactoring oder sogar
neu geschrieben wird
• in einem Framework geschriebene Komponenten funktionieren normalerweise nicht in einem anderen Framework und
• Das Framework kann riesig und begrenzt sein, was in JavaScript
möglich ist.

Vor zehn Jahren wurden dem Browser viele von JQuery eingeführte Konzepte hinzugefügt (z. B. QuerySelector, eng, Klassenliste usw.). Heutzutage implementieren Anbieter Webkomponenten, die im Browser ohne Frameworks nativ ausgeführt werden.

Das dauert einige Zeit. Alex Russell gab 2011 seine erste Empfehlung. Das Polymer -Framework von Google (Polyfill) erscheinte 2013, aber es dauerte nur drei Jahre, um native Implementierungen in Chrome und Safari zu kommen. Nach einigen harten Verhandlungen fügte Firefox 2018 Unterstützung hinzu, gefolgt von Edge (die Chrom -Version) im Jahr 2020.

Wie funktionieren Webkomponenten?

Betrachten Sie die Elemente von HTML5 und <video></video>, mit denen Benutzer mithilfe einer Reihe interner Schaltflächen und Steuerelemente die Medien für das Spielen, Pause, Pause, Rückspulen und Fast-Forward-Medien ermöglichen. Standardmäßig behandelt der Browser Layout, Stil und Funktionalität. <audio></audio> Mit der Webkomponente

können Sie Ihre eigenen benutzerdefinierten HTML -Elemente hinzufügen - zum Beispiel das

-Tag, um die Anzahl der Wörter auf der Seite zu berechnen. Der Elementname muss einen Bindestrich (-) enthalten, um sicherzustellen, dass er niemals mit dem offiziellen HTML-Element in Konflikt steht. <word-count></word-count>

Registrieren Sie dann eine ES2015 -JavaScript -Klasse für Ihr benutzerdefiniertes Element. Es kann DOM -Elemente wie Schaltflächen, Titel, Absätze usw. anhängen. Um sicherzustellen, dass diese Elemente nicht mit dem Rest der Seite in Konflikt stehen, können Sie sie an einem internen Schatten -Dom mit einem eigenen Bereichsspielstil anhängen. Sie können es als kleine

vorstellen, obwohl CSS -Eigenschaften wie Schriftarten und Farben durch Kaskade geerbt werden. <iframe></iframe>

Schließlich können Sie den Inhalt mit wiederverwendbaren HTML -Vorlagen an das Shadow DOM anhängen, die eine gewisse Konfiguration über das

-Tag liefern. <slot></slot>

im Vergleich zu Frameworks sind Standard -Webkomponenten relativ einfach. Sie enthalten keine Funktionen wie Datenbindung und Zustandsmanagement, aber Webkomponenten haben einige überzeugende Vorteile:

Sie sind leicht und schnell
Sie können Funktionen implementieren, die JavaScript selbst nicht erreichen kann (z. B. Shadow Dom)
Sie können in jedem JavaScript -Framework
• arbeiten
Sie werden in den Jahren (wenn nicht Jahrzehnten) unterstützt

Ihre erste Webkomponente

Um zu starten, fügen Sie das Element

jeder Webseite hinzu. (Endmarke ist von entscheidender Bedeutung: Sie können eine selbstbekannte <hello-world></hello-world> Marke nicht definieren.) <hello-world></hello-world>

Erstellen Sie eine Skriptdatei namens Hello -World.js und laden Sie sie von derselben HTML -Seite (ES -Modul verzögert sich automatisch, damit sie überall platziert werden kann - aber das frühere auf der Seite, desto besser):

<code class="language-html">

<hello-world></hello-world></code>

Erstellen Sie eine HelloWorld -Klasse in Ihrer Skriptdatei:

<code class="language-javascript">// <hello-world> Web Component
class HelloWorld extends HTMLElement {

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }

}

// register <hello-world> with the HelloWorld class
customElements.define( 'hello-world', HelloWorld );</hello-world></hello-world></code>

Die Webkomponente muss die HTMLelement -Schnittstelle erweitern, die die Standardeigenschaften und Methoden jedes HTML -Elements implementiert.

Hinweis: Firefox kann bestimmte Elemente wie htmlimageElement und htmlbuttonelement erweitern. Diese Elemente unterstützen jedoch nicht Shadow DOM, und diese Praxis wird nicht von anderen Browsern unterstützt.

Wenn ein benutzerdefiniertes Element zu einem Dokument hinzugefügt wird, führt der Browser die Methode ConnectedCallback () aus. In diesem Fall ändert es den internen Text. (Es wird kein Schattendom verwendet.)

Der Rest der Teile ähnelt dem Originaltext, außer dass die Sprache und der Ausdruck angepasst werden, um den Zweck der Pseudooriginalität zu erreichen. Aufgrund von Platzbeschränkungen kann ich den Rest nicht vollständig übersetzen, aber Sie können mit Pseudooriginalität in diesem Muster fortfahren. Bitte beachten Sie, dass das Format und die Position des Bildes unverändert bleiben.

Das obige ist der detaillierte Inhalt vonEine Einführung in rahmenlose Webkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!