Ein bisschen in Webkomponentenbibliotheken
In letzter Zeit gab es viele Neuigkeiten über Webkomponenten, und ich werde sie hier sortieren.
Ich denke, eines der besten Anwendungsszenarien für Webkomponenten ist die Musterbibliothek. Anstatt es wie Bootstrap zu verwenden<div> , oder benutze es wie Bulma<code><div> Es ist besser, benutzerdefinierte Elemente zu verwenden, z.<code><designsystem-tabs></designsystem-tabs>
. Die neue Shoelace -Bibliothek definiert den sl
-Namespace, um ihre Komponenten zu definieren. Es ist eine Schema -Bibliothek, die ausschließlich auf Webkomponenten basiert, in denen die Tags sind<sl-tab-group></sl-tab-group>
Element.
Was sind die Vorteile davon? Zunächst wird das Komponentenmodell eingeführt. Dies bedeutet, dass, wenn Sie an einer Komponente arbeiten, eine Vorlage und ein Stylesheet mit seinem Standort bezieht. Wenn Sie sich die interne Implementierung von Shoelace ansehen, können Sie sehen, dass alles auf Schablonen basiert.
Ein weiterer Vorteil ist, dass die Komponente einen Schattendom verwenden kann (und verwendet) kann. Dies bietet einen Isolationsmechanismus direkt von der Webplattform. Für uns CSS -Entwickler bedeutet dies, dass der Stil der Tags in der Tag -Komponente mit der .tab
-Klasse (wow, es ist so cool!) Und in dieser Komponente isoliert. Selbst bei einem so generischen Namen würde ich nicht versehentlich andere Komponenten der gemeinsamen Klasse auf der Seite beeinflussen, noch würde es einige externe CSS geben, die die interne Struktur hier beeinträchtigen. Shadow Dom ist wie eine Sicherheitswand, die verhindert, dass Stile und Infiltration verhindern.
Ich sehe auch das schnelle Frameworkschragen, das auch eine Reihe von Komponenten ist. Sein Tag ist definiert als<fast-tabs></fast-tabs>
. Dies erinnert mich an einen weiteren Vorteil von Webkomponenten als Schema-Bibliotheksmethode: Es fühlt sich an, als wäre es api-gesteuert und beginnt sogar mit dem Namen der Komponente selbst, was Sie tatsächlich in HTML verwenden. Die Eigenschaften dieses Elements können vollständig angepasst werden. Der aufkommende Standard scheint zu sein, dass Sie nicht einmal data-
zu benutzerdefinierten Eigenschaften hinzufügen müssen. Wenn ich also eine Tag -Komponente erstellen möchte, kann es sein<chris-tabs active-tab="lunch" variation="rounded"></chris-tabs>
.
Der vielleicht größte Spieler, der Webkomponenten als Schema -Bibliothek verwendet, ist ionisch. Ihre Etiketten sind<ion-tabs></ion-tabs>
Sie können sie verwenden, ohne andere Rahmenbedingungen einzubeziehen (obwohl sie Angular, React und Vue zusätzlich zu ihrer eigenen Schablone unterstützen). Ionic hat große Fortschritte in Webkomponenten erzielt und kürzlich Schatten -Teile unterstützt. Hier ist die Erklärung von Brandy Carney erneut, die die Verpackung erklärt:
Shadow DOM hilft, zu verhindern, dass Stile aus Komponenten austreten und versehentlich auf andere Elemente angewendet werden. Zum Beispiel weisen wir unsere
.buttonclass
zu<ion-button></ion-button>
Komponenten. Wenn der Ionic Framework -Benutzer die.button
-Klasse auf eines seiner eigenen Elemente festlegt, erbt sie in früheren Versionen des Frameworks den Ionic -Taste -Stil. Weil<ion-button></ion-button>
Es ist jetzt eine Schatten -Webkomponente, daher existiert dieses Problem nicht mehr.Aufgrund dieser Kapselung kann der Stil jedoch nicht in die internen Elemente der Schattenkomponente eindringen. Dies bedeutet, dass der Benutzer seine CSS nicht verwenden kann, um interne Elemente zu lokalisieren, wenn die Schattenkomponente Elemente in seinem Schattenbaum rendert.
Die Kapselung ist eine gute Sache, aber es macht das Styling (absichtlich) "schwieriger". Es gibt ein wichtiges CSS -Konzept zu verstehen: CSS -benutzerdefinierte Eigenschaften können in den Schattendom eindringen . Aber es ist nicht ratsam, dass die Menschen entscheiden - ich denke, das ist richtig -, alles in einem Designsystem variabel zu "". Stattdessen geben sie jedem HTML -Fragment innerhalb des Schattendoms einen Teil, z.<div part="icon"> , was es uns ermöglicht, mit CSS, z. <code>custom-component::part(icon) { }
. Ich denke, Teilbasis-Style-Haken sind meistens gut und eine vernünftige Lösung für eine Musterbibliothek wie diese, aber ich gebe zu, dass ein Teil davon mich stört. Der Selektor funktioniert anders als erwartet. Sie können beispielsweise den Inhalt nicht bedingt auswählen. Sie können auch keine untergeordneten Elemente auswählen oder Kaskaden verwenden. Mit anderen Worten, es ist nur ein einmaliges oder so, als würden Sie mit Ihren Händen direkt durch den Film gehen. Sie können nach vorne greifen und etwas greifen oder nicht, aber Sie können nichts tun.
Apropos Dinge, die die Menschen wütend machen, Andrea Giammarchi hat einen guten Standpunkt für die aktuelle Situation von Webkomponenten:
Jede Bibliothek, die mit meiner begann, schlägt vor, dass wir die Bibliothek importieren sollten, um das sogenannte " tragbare benutzerdefinierte Element " zu definieren.
Google empfiehlt immer, Litelement zu verwenden. Microsoft möchte, dass Sie Fastelement verwenden. Schablone hat seine eigenen Komponenten. Hyperhtml hat seine eigenen Komponenten. Niemand verwendet nur "rohe" Webkomponenten. Das ist sehr seltsam! Das Schlimmste ist, dass Webkomponenten eine "native Plattform" sein sollten, was bedeutet, dass wir uns nicht auf eine bestimmte Technologie verlassen müssen , um sie zu verwenden. Wenn wir dies tun, sind wir wie React oder irgendetwas anderes daran eingesperrt.
Andrea setzt einige Ideen in den Artikel vor, einschließlich der Verwendung einiger neuer und kleinerer Bibliotheken. Ich denke, was ich sehen möchte, ist eine Schema -Bibliothek, die überhaupt keine Bibliothek verwendet.
- Fast nennt sich selbst ein "Schnittstellensystem" in einem kontinuierlichen Satz auf der Homepage, gefolgt von einem "UI -Framework". Shoelaces nennt sich selbst eine "Bibliothek", aber ich nenne es eine "Modusbibliothek". Ich denke, "Designsystem" ist der am häufigsten verwendete Begriff, um dieses Konzept zu beschreiben, aber oft umfangreicher als eine bestimmte Technologie. Schnell verwendet diesen Begriff im Code selbst, um das Wrapper -Element zu bezeichnen, das das Thema steuert. Ich denke nicht, dass die Terminologie, die all dieses Zeug umgibt, alles andere als sicher ist.
Das obige ist der detaillierte Inhalt vonEin bisschen in Webkomponentenbibliotheken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

CSS Grid ist eine Sammlung von Eigenschaften, die das Layout einfacher machen als jemals zuvor. Wie alles andere ist es eine kleine Lernkurve, aber das Gitter ist

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen
