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.

1. 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.