Share
Web-Komponenten werden derzeit aufgeregt als bevorstehende "tektonische Verschiebung für die Webentwicklung" mit dem Versprechen einer dauerhaften Neugestaltung der Webdesign-Landschaft bezeichnet. Big Player machen Fortschritte, um Webkomponenten in die Realität umzusetzen. Sowohl Google als auch Mozilla implementieren bereits schrittweise die Unterstützung für native Browser.
Welche Webkomponenten fragen Sie? Kurz gesagt: Mit Webkomponenten können Sie Ihre eigenen benutzerdefinierten HTML-Elemente erstellen, die nahezu alles tun können, wo Sie sie benötigen. Anstatt Ihre Websites mit ausführlichen Markups, langen Skripts und sich wiederholendem Code zu laden, packen Sie alles in nette, ordentliche kleine benutzerdefinierte HTML-Elemente.
Der einfachste Weg, um zu verstehen, wie Webkomponenten benutzerdefinierte HTML-Elemente zulassen, besteht darin, zunächst ein vorhandenes Element zu betrachten, das wir bereits aus HTML5 kennen: the Etikett. Mit diesem Element können Sie ein Video mit nur wenigen Codezeilen platzieren, zum Beispiel:
Möglicherweise sehen Sie nur ein paar Zeilen HTML oben, aber hier ist, was die Element sieht wirklich aus wie hinter den Kulissen:
Standardmäßig verbirgt der Browser den gesamten ausführlichen Code, sodass Sie ihn nicht sehen oder sich um das Schreiben kümmern müssen, wenn Sie ein Video platzieren möchten. Sie schlagen einfach in Ihre und
Bisher konnten nur Browseranbieter Elemente auf diese Weise erstellen. Stellen Sie sich jedoch vor, Sie könnten diesen Ansatz auch für andere Arten von Inhalten verwenden?
Nehmen Sie zum Beispiel eine Bild-Diashow. Normalerweise benötigen Sie einige Runden verschachtelter Divs mit bestimmten Klassennamen, um die Diaschau umwickeln, jede Folie umschließen und Beschriftungen und Miniaturbilder hinzufügen zu können. Sie müssen auch allgemeine Diashow-Optionen für Dinge wie Folienübergangseffekte über Inline-jQuery / JavaScript einstellen.
Was wäre, wenn Sie das alles überspringen könnten und stattdessen einfach Folgendes verwenden:
Mit Webkomponenten können Sie genau das tun.
Wenn Sie eine prägnante, einfach anzuwendende Methode zur Platzierung von Inhalten bereitstellen möchten, die sonst aufgebläht und unhandlich wäre, können Sie Ihre eigene Webkomponente erstellen.
Webkomponenten können auch problemlos gemeinsam genutzt werden. Wenn Entwickler an Bord sind, besteht die Möglichkeit, dass Sie eine vorgefertigte Webkomponente für die häufigsten Projektanforderungen verwenden. Bereits jetzt sehen wir frei gemeinsam genutzte Komponenten für die Spracherkennung…
für Präsentationsbauer…
zur QR-Code-Generierung.
Werfen wir einen Blick auf die Hintergründe von Webkomponenten.
Webkomponenten, wie sie im Moment existieren, bestehen aus vier Teilen:
Benutzerdefinierte Elemente sind genau so, wie sie sich anhören: Elemente, die beliebig benannt werden können und auf beliebige Weise funktionieren. Und wenn ich irgendetwas sage, meine ich es wirklich so. Zum Beispiel präsentiere ich die
Live-Demo - schweben Sie über die BarBenutzerdefinierte Elemente werden in ihrer einfachsten Form wie folgt deklariert:
…
Wenn Sie ein benutzerdefiniertes Element erstellen, können Sie es komplett neu erstellen oder ein vorhandenes HTML-Element erweitern, z Geben Sie ihm beispielsweise die geänderte Funktionalität oder Präsentation, die Sie benötigen.
…
Hinweis: Es lohnt sich, darauf hinzuweisen, dass die
Das Shadow DOM ist wirklich der Kernaspekt der Funktionsweise von Webkomponenten. Zuvor haben wir uns das HTML5 angesehen Element und zeigte, dass, obwohl nur ein paar Zeilen Code zu sehen sind, in der Realität ziemlich viel Code standardmäßig verborgen ist. Der Ort, an dem dieser versteckte Code lebt, wird "Shadow DOM" genannt..
Browser-Anbieter verwenden dieses Schatten-DOM seit Jahren, um Elemente wie Eingabe, Audio, Video usw. nativ zu implementieren. Durch Webkomponenten kann es jetzt von jedem Entwickler verwendet werden.
Die allgemeine Idee ist, dass Sie den gesamten Code nehmen, der während der Platzierung von Markierungen nicht wirklich gesehen werden muss, und ihn im Schatten-DOM verdecken, damit er nicht im Weg ist. So müssen Sie sich nur noch mit den relevanten Informationen befassen, z. B. Höhe, Breite und Speicherort der Quelldatei, wenn Sie das verwenden Element.
Eine der coolsten Sachen bei der Arbeit mit dem Shadow DOM ist, dass jede Instanz eine eigene, kleine Welt ist. Wenn Sie also Stil und Skripte im Element haben, werden sie nicht versehentlich herausgelaufen und wirken sich auf der Seite auf etwas anderes aus.
Umgekehrt wirken sich CSS und JavaScript an anderer Stelle auf der Seite nicht auf Ihre Webkomponente aus, mit Ausnahme von Style-Hooks, die Sie möglicherweise speziell für die Ermöglichung externer CSS-Targeting erstellen. Dies alles bedeutet, dass Sie sich keine Sorgen mehr machen müssen, dass der Namensraum Ihrer ID- und Klassennamen zur Vermeidung von Konflikten verwendet wird.
Wenn Sie sehen möchten, wie das Schatten-DOM aussieht, ist es einfach. Stellen Sie sicher, dass Sie eine aktuelle Installation von Chrome ausführen, öffnen Sie die Entwicklungswerkzeuge, klicken Sie auf das Zahnradsymbol, um die Einstellungen zu öffnen, und aktivieren Sie das Kontrollkästchen Benutzeragentenschatten-DOM anzeigen:
Wenn Sie dann ein Element mit einem Schatten-DOM untersuchen, wird der vollständige Code angezeigt. Probieren Sie es aus, indem Sie die
Einen vollständigen Überblick über das Schatten-DOM finden Sie hier: Intro to Shadow DOM
Wir haben bereits erläutert, wie durch benutzerdefinierte Elemente nur auf die relevanten Informationen konzentriert werden kann, während der gesamte verbleibende Code im Schatten-DOM verdeckt wird. Eine Vorlage in einer Webkomponente enthält alle Präsentationselemente dieses verbleibenden Codes.
Als Teil des Codes, der die Webkomponente definiert, werden die Tags definiert … werden platziert, und zwischen diesen Tags ist HTML und CSS enthalten, die die Komponente benötigt.
Sehen Sie sich beispielsweise den Code an, mit dem der erstellt wurde Das Tag befindet sich in Zeile 4 und wird geschlossen Das Tag befindet sich in Zeile 201. Zwischen diesen Tags werden alle CSS angezeigt, die für die Erstellung der Positionierung und Animation verantwortlich sind, sowie der HTML-Code, der alle beteiligten Bilder platziert.
Mit HTML-Importen können Sie alles, was oben beschrieben wurde, in Ihre Seite integrieren. Webkomponenten werden in einer externen HTML-Datei definiert, sodass die Datei importiert werden muss, damit ein benutzerdefiniertes Element funktioniert. HTML-Importe behandeln dies über a Tag, den Sie beim Importieren von externen CSS-Dateien kennen.
Zum Beispiel, bevor Sie die verwenden konnten
Die Möglichkeiten, die Web-Komponenten bieten, machen die Idee des ersten Tauchgangs sehr attraktiv, jedoch ist die Browser-Unterstützung derzeit noch nicht durchführbar. Der aktuelle Support-Status sieht folgendermaßen aus:
http://jonrimmer.github.io/are-we-componentized-yet/Native Unterstützung wird derzeit für Chrome, Opera und Firefox implementiert, ist jedoch noch nicht vollständig. IE und Safari haben ihre Pläne noch nicht bekannt gegeben. Allerdings wird davon ausgegangen, dass angesichts der Mehrheit der Browser Webkomponenten letztendlich die anderen Browser unterstützen werden.
Wenn Sie jetzt mit Webkomponenten arbeiten möchten, müssen Sie eine der verfügbaren Polyfills verwenden. Die gute Nachricht ist, dass zwei der populärsten Lösungen von Google und Mozilla entwickelt wurden. Es kann also davon ausgegangen werden, dass der native Support letztlich funktionieren wird.
Es ist schwer, sich nicht auf die Verwendung von Polymer zu verlassen, da Chrome heute der am weitesten verbreitete Browser ist, und Sie könnten bei der Entwicklung berücksichtigen, wie der Code für Webkomponenten von Google indiziert wird.
Polymer wird mit einer vollständigen Bibliothek vorgefertigter Webkomponenten geliefert. Es umfasst die "Polymerkernelemente", die funktional orientiert sind, und die "Papierelemente", die designorientiert sind.
Beim Erstellen benutzerdefinierter Elemente mit Polymer anstelle des Formats
Polymer beschreibt sich selbst als in der "Entwicklervorschau" und nicht als absolut serienreif, wie sie auch sagen
… Trotz des Labels hatten viele Menschen bereits Erfolg bei der Verwendung von Polymer in der Produktion.
Wenn Sie IE9 anbieten müssen, das schätzungsweise 1,9% bis 5,11% des Marktanteils ausmacht, haben Sie mit Polymer leider kein Glück. Sie können jedoch stattdessen weiterhin mit Mozillas X-Tags arbeiten.
X-Tags ist eine von Mozilla erstellte JavaScript-Bibliothek, die derzeit einen Vorteil gegenüber Polymer hat, da ihre Browser-Unterstützung weitreichender ist. Wenn dies eine wichtige Überlegung für Sie ist, können X-Tags Ihre Vorlieben sein.
Wenn Sie IE8 unterstützen müssen, sind Webkomponenten leider nicht für Sie geeignet, da die verfügbaren Polyfills IE9 + unterstützen. Schätzungen gehen davon aus, dass IE8-Benutzer bei etwa 2,1% bis 3,82% liegen. Wenn Ihre Statistiken jedoch etwas anderes sagen, müssen Sie ein Urteil darüber abgeben, wie weit Ihr Browser-Support reichen sollte.
Eine Möglichkeit, sich auf den Übergang zur Verwendung von Webkomponenten vorzubereiten, besteht im Moment darin, mit Ember.js oder AngularJS zu arbeiten. Beide haben eigene Systeme zur Erstellung von Komponenten und beide versprechen einen Übergang zur Verwendung von nativem Webkomponentencode, sobald dieser vollständig verfügbar ist.
Ich hoffe, es hat Ihnen gefallen, diesen Überblick über die Webkomponenten zu lesen und warum Sie sich darum kümmern sollten! Es gibt noch viel mehr zu entdecken, aber mit diesen Grundlagen haben wir viele Möglichkeiten für Tutorials zum Erstellen von benutzerdefinierten Webkomponenten. Was denkst du? Unter welchen Umständen könnten Sie sich sehen, wie Sie sie benutzen?
Accentsconagua