In diesem Artikel geht es nicht darum, wie Sie Webkomponenten erstellen, Caleb Williams hat kürzlich einen detaillierten Leitfaden geschrieben. Lassen Sie uns diskutieren, wie man sie benutzt, welche Faktoren beim Aufbau berücksichtigt werden müssen und wie sie in Ihrem Projekt effektiv eingesetzt werden.

Wenn Sie in Webkomponenten neu sind, ist Calebs Leitfaden wert, lesen Sie zu lesen. Hier finden Sie jedoch einige Ressourcen, mit denen Sie schnell beginnen k?nnen:

• Webkomponenten - der "richtige" Ansatz
• Shadow DOM V1: in sich geschlossene Webkomponenten
• Webkomponenten auf MDN
• Tolle Webkomponenten
• Empfohlene offene Webkomponenten

Mit Webkomponenten, die jetzt weitgehend unterstützt werden (dank der harten Arbeit vieler hinter den Kulissen) und in Anbetracht der Tatsache, dass Edge bald auf die Chromium-Plattform wechselt-sehen die Leute jetzt Webkomponenten als ?native“ und plattformkompatible Methode, um wiederverwendbare UI-Komponenten zu erstellen, um die Konsistenz zwischen Designsystemen und Webprojekten zu nutzen, w?hrend die Kraft des Schatten-Dom-To-Aufenthalts in den Komponenten in der Komponente in den Komponenten einkapituliert.

Das ist sowohl richtig als auch falsch. Aber werfen wir zun?chst einen Blick auf das abstrakte Schichtdreieck .

Abstraktes Schichtdreieck

Technisch gesehen sollten wir Webkomponenten als Erweiterung unserer bevorzugten Markup -Sprache HTML (ja!) Betrachten. Mit der Web -Komponenten -API k?nnen wir benutzerdefinierte HTML -Elemente erstellen, die in HTML nicht vorhanden sind (zum Beispiel<foo-bar></foo-bar> ).

Einige sagen, dass Webkomponenten im Grunde neue HTML -Elemente sind, daher sollten wir sie als Teil der HTML -Spezifikation betrachten. Daher sollten wir seinem Paradigma, den Kernkonzepten und dem Gebrauch folgen. Wenn wir all diese Punkte annehmen, werden wir feststellen, dass unsere Komponenten auf der niedrigsten Ebene des Webplattformstapels neben HTML, CSS und JavaScript existieren werden. Frameworks und Bibliotheken (z. B. React, Vue, Angular, Sveltejs) arbeiten auf ihrer Abstraktionsschicht und sitzen auf anderen Werkzeugen, die sich in einer Art "Mittelerde" befinden, wie Schablonen, Hybriden und beleuchtet. Unter diesen Abstraktionsebenen finden wir unsere grundlegenden Webtechnologien… und native Webkomponenten. Wir k?nnen das ALT -Diagramm ( Abstraktionsla ayer t Riangle) verwenden, um dieses Konzept darzustellen:

Warum ist das wichtig? Es hilft uns, die Schichten zu visualisieren, die auf den nativen Komponenten existieren, und ihre Nutzungsumgebung zu verstehen, damit sie gegen die beabsichtigte Umgebung gebaut werden k?nnen. Was ist die Umwelt? Das ist unser Ziel.

Gleiche Technologie, unterschiedliche Umgebungen

Shadow Dom ist ein Schlüsselfaktor in der Web -Komponenten -API. Es erm?glicht uns, JavaScript und CSS in benutzerdefinierte Elemente zu bündeln, um externe Interferenzen und Stilvorg?nge zu verhindern, es sei denn, wir erlauben dies ausdrücklich. Entwickler k?nnen in der Tat einige M?glichkeiten befolgen, um externen CSS in Schattenwurzel und Komponenten zu durchlaufen, einschlie?lich benutzerdefinierter Eigenschaften sowie: Teil und :: Themenpseudo-Elemente, die Monica Dinculescu eine gute Einführung hat.

Eine andere Sache zu berücksichtigen: die Umgebung, die wir verwenden. Drei Jahre nachdem ich meine Webkomponenten pers?nlich erstellt habe, kann ich zwei Umgebungen identifizieren: private Umgebungen (wie Designsysteme) und Standardumgebungen (z. B. einfaches HTML, CSS und JavaScript ohne benutzerdefinierte Stile).

Vor dem Entwerfen von Komponenten müssen wir verstehen, wie sie verwendet werden. Die Ermittlung des Umgebungstyps ist daher der Schlüssel zu all dem. Der einfachste Weg ist es, nur auf eine Umgebung abzuzielen, aber mit einem kleinen CSS -Trick k?nnen wir Komponenten für beide erstellen.

Bevor wir tiefer graben, schauen wir uns den Unterschied zwischen den beiden Umgebungen an.

Privates Umfeld

Eine private Umgebung ist ein geschlossenes ?kosystem, das Komponenten ihre eigenen Stile bietet und so wie es ist. Wenn wir also eine Bibliothek von Komponenten aus einem bestimmten Stilhandbuch oder einem bestimmten Designsystem erstellen, spiegelt jede Komponente einen benutzerdefinierten Stil wider, sodass Sie ihn nicht jedes Mal codieren müssen, wenn Sie ihn ben?tigen.

Gleiches gilt für die JavaScript -Logik. Zum Beispiel k?nnen wir eine geschlossene Schattenwurzel anbringen, um zu verhindern, dass andere die Schattengrenze mit QuerySelector versehentlich durchdringen. Daher k?nnen wir einfach jede Komponente ausw?hlen und verwenden, um Probleme wie Inkonsistenz in Stilen und CSS -Konflikten zu vermeiden. Als Autor k?nnen Sie auch eine Reihe von CSS -benutzerdefinierten Eigenschaften (OR :: Teilen) definieren, die verwendet werden k?nnen, um Komponenten für einen bestimmten Anwendungsfall zu stylen. Dies steht jedoch nicht im Mittelpunkt der Gestaltung des Systems.

Dies ist ein Beispiel für die Verwendung von Webkomponenten in einer privaten Umgebung. Alle Stile und Logik sind in seiner Schattenwurzel enthalten und k?nnen einfach zu jeder Seite hinzugefügt werden.

Dies und nachfolgende Beispiele dienen nur für Demonstrationszwecke und sind nicht für Produktionsumgebungen bestimmt, da sie keine kritischen Situationen wie Barrierefreiheit und andere Optimierungen berücksichtigen.

Komponenten in privaten Umgebungen werden selten au?erhalb dieser Umgebung eingesetzt. Wenn wir beispielsweise versuchen, ein Element aus einem Designsystem (mit einem eigenen erzwungenen Stil) zu erhalten, k?nnen wir es nicht einfach dem Projekt hinzufügen und damit rechnen, es anzupassen. Wissen Sie, wie Bootstrap das Thema entsprechend Ihren Vorlieben einrichten und anpassen kann? Dies ist genau das Gegenteil. Diese Komponenten sollen in ihrer Umgebung und nur in ihrer Umgebung laufen.

Standardumgebung

Standardumgebungen sind wahrscheinlich der komplexeste Komponententyp, nicht nur, weil Umgebungen von ausgereiften Frameworks wie VUE reichen und auf einfache native HTML reagieren k?nnen, sondern weil jeder diese Komponente so verwenden sollte, als w?re es ein anderes Element.

Wenn beispielsweise eine Komponente ?ffentlich hinzugefügt wird (z. B. Hinzufügen zu NPM), erwarten diejenigen, die sie verwenden, zumindest in gewissem Ma?e in der Lage, sie anzupassen.

Kennen Sie HTML -Elemente mit ihrem eigenen Demo -Stil? Die Antwort sollte "Nein" sein, da Elemente mit CSS explizit gestylt werden müssen. Gleiches gilt für Webkomponenten in einer Standardumgebung. Eine einzelne Webkomponente sollte durch Hinzufügen von Klassen und Eigenschaften oder anderen Methoden angepasst werden.

Dies ist das gleiche, wie wir im Beispiel für geschlossene Umgebung sehen<todo-list></todo-list> Element, aber es ist für Standardumgebungen ausgelegt. Es funktioniert so, wie es keine Demo -Stile in seiner Schattenwurzel ist. Tats?chlich enth?lt es nur die erforderliche Logik und grundlegende CSS, um seine Funktionalit?t zu gew?hrleisten. Andernfalls kann es wie jedes Standard -HTML -Element (wie eine DIV) angepasst werden.

Die beiden Beispiele, die wir für jede Umgebung betrachten, wurden mit denselben Komponenten hergestellt. Der Unterschied besteht darin, dass Komponenten in einer Standardumgebung mit externen CSS angepasst und ausgew?hlt werden k?nnen.

Webkomponenten und Kompositionen

OK, die Verwendung von Webkomponenten ist also tats?chlich der gleiche wie die Verwendung von einfachem HTML, obwohl es, wie wir sehen k?nnen, sehr wichtig ist, die Paradigmen und Prinzipien eines bestimmten Inhalts zu befolgen. Was wir beachten müssen, ist die Kombination von Webkomponenten.

Wie Google Web Fundamentals erkl?rt:

Kombinationen sind eines der am wenigsten bekannten Merkmale von Shadow Dom, aber sie sind wohl die wichtigste.

In unserer Web -Development -Welt erstellen wir die Anwendungen, die mithilfe von HTML deklarativ sind. Verschiedene Bausteine ??(<div> Anwesend<code><s></s> Anwesend<em></em> Anwesend<strong></strong> ) zusammenstellen, um eine Anwendung zu bilden. Einige dieser Tags k?nnen sogar miteinander verwendet werden. Kombination ist der Grund<select></select> Anwesend<details></details> Anwesend<summary></summary> Und<video></video> Der Grund, warum solche einheimischen Elemente so flexibel sind. Jedes Tag akzeptiert bestimmte HTML als Kinderelemente und führt einige spezielle Operationen aus. Zum Beispiel,<select></select> Wissen, wie man<option></option> Und<optgroup></optgroup> Als Dropdown-Liste und als Multi-Select-Widget gerendert.<details></details> Das Element wird<summary></summary> Als erweiterbare Pfeile dargestellt. sogar<video></video> Wissen Sie auch, wie man mit bestimmten Kinderelementen umgeht:<track></track> Elemente werden nicht gerendert, wirken sich jedoch auf das Verhalten des Videos aus. Wie toll! Zusammensetzung ist das, was wir normalerweise tun, wenn wir HTML verwenden. Da eine Webkomponente lediglich ein HTML -Element mit einer DOM -Referenz (kein logischer Container) ist, sollten wir uns auf Kombinationen verlassen, um unsere Komponenten und alle Unterkomponenten zu erstellen. Wenn Sie berücksichtigen

Und<select></select> Sie werden feststellen, dass Sie diese Elemente deklarativ kombinieren, um die endgültige Ausgabe zu erhalten, und Sie haben spezifische Eigenschaften, die für die Hauptkomponente (z. B. [readonly] ) oder die untergeordnete Komponente (z. B. [selected] ) verwendet werden k?nnen. Gleiches gilt für Webkomponenten. Wenn Sie eine benutzerdefinierte Liste erstellen, sollten Sie die Hauptkomponente erstellen (<custom-list></custom-list> ) und Unterkomponenten (<custom-li></custom-li> ). verwenden<slot></slot> In Elementen k?nnen Sie definieren, wo die Kinderelemente platziert werden, und welche Platzhalterinhalte, die angezeigt werden, wenn die untergeordneten Elemente nicht bestanden werden.

Webkomponenten und Zug?nglichkeit

Eine andere Sache zu beachten ist das, was wir das ?kleine“ Thema der Zug?nglichkeit nennen. Da wir ein v?llig neues HTML -Element erstellen, müssen wir die Zug?nglichkeit des Elements berücksichtigen, um grundlegende semantische Rollen, jede Tastaturnavigation und die Betriebssystempr?ferenzen des Benutzers wie reduzierte Bewegung und hohe Kontrasteinstellungen zu erm?glichen.

Ich empfehle dringend die folgenden Ressourcen als Referenz für die Erstellung von zug?nglichen und integrativen Komponenten, die Definition semantischer Tags und die Implementierung der grundlegenden Tastaturnavigation.

• Inklusive Komponenten
• "Effekt für alle" auf Web.dev
• Wai-Aria Kreative Praxis
• Webaim WCAG -Checkliste

abschlie?end

Webkomponenten sind eine aufstrebende Technologie in der Webentwicklung, daher gibt es keine gut definierten Best Practices, die uns leiten, wenn es darum geht, sie auf der Grundlage ihrer beabsichtigten Verwendung oder Maximierung der Verwendung zu erstellen. Wenn Sie sie benutzen, k?nnen Sie nur in diesem Beitrag prüfen, ob sie für geschlossene oder Standardumgebungen sind und sich von Ihnen fragen:

• W ho wird diese Komponente verwenden?
• Viel Flexibilit?t Diese Person sollte es anpassen müssen?
• Ist diese Komponente für alle oder für ein bestimmtes Publikum geeignet?