Machen Sie Webkomponenten für verschiedene Kontexte

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?

Das obige ist der detaillierte Inhalt vonMachen Sie Webkomponenten für verschiedene Kontexte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!