Aktualisierung der Webkomponenten: mehr Zeit für das Upgrade auf v1-APIs

Jonathan Bingham

Arthur Evans

Die Web Components v1 APIs sind ein Webplattformstandard, der in Chrome, Safari, Firefox und (demnächst) Edge bereitgestellt wird. Die v1 APIs werden buchstäblich von Millionen von Websites verwendet und erreichen täglich Milliarden von Nutzern. Entwickler, die den API-Entwurf für Version 0 verwendet haben, lieferten wertvolles Feedback, das die Spezifikationen beeinflusst hat. Die v0 APIs wurden jedoch nur von Chrome unterstützt. Um die Interoperabilität zu gewährleisten, haben wir Ende letzten Jahres bekannt gegeben, dass diese API-Entwürfe eingestellt wurden und ab Chrome 73 entfernt werden sollten.

Da genug Entwickler mehr Zeit für die Migration angefordert haben, wurden die APIs noch nicht aus Chrome entfernt. Die API-Entwürfe sollen in Chrome 80 voraussichtlich im Februar 2020 entfernt werden.

Hier finden Sie alles, was Sie wissen müssen, wenn Sie glauben, dass Sie die v0 APIs verwenden:

• Testen Sie Ihre Website mit deaktivierten v0 APIs. Wenn Ihre Website wie erwartet funktioniert, haben Sie alles richtig gemacht. Fertig. Eine Anleitung finden Sie unter Zurück in die Zukunft: APIs v0 deaktivieren.
• Wenn Sie die Polymer-Bibliothek Version 1 oder Version 2 verwenden, folgen Sie der zuvor veröffentlichten Anleitung des Polymer-Teams.
• Wenn Sie Shadow DOM v0, benutzerdefinierte Elemente v0 oder HTML-Importe verwenden, müssen Sie einige Polyfills laden. Weitere Informationen findest du unter V0-Polyfills verwenden.
• Es ist nicht schlimm, wenn Sie nicht sicher sind, was Sie verwenden. Weitere Informationen finden Sie in der Hilfe Ich weiß nicht, welche APIs ich verwende.

Zurück in die Zukunft: V0 APIs deaktivieren

Wenn Sie Ihre Website bei deaktivierten APIs von Version 0 testen möchten, müssen Sie Chrome mit den folgenden Flags über die Befehlszeile starten:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

Du musst Chrome beenden, bevor du ihn über die Befehlszeile starten kannst. Wenn Sie Chrome Canary installiert haben, können Sie den Test in Canary ausführen, während diese Seite in Chrome geladen bleibt.

So testen Sie Ihre Website mit deaktivierten v0-APIs:

1. Wenn Sie Mac OS verwenden, gehen Sie zu chrome://version, um den ausführbaren Pfad für Chrome zu finden. Sie benötigen den Pfad aus Schritt 3.
2. Schließen Sie Chrome.

3. Starten Sie Chrome mit den Befehlszeilen-Flags neu:

   --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

   Eine Anleitung zum Starten von Chrome mit Flags finden Sie unter Chromium mit Flags ausführen. Unter Windows können Sie beispielsweise Folgendes ausführen:

   chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
   

4. Um zu überprüfen, ob Sie den Browser korrekt gestartet haben, öffnen Sie einen neuen Tab, öffnen Sie die Entwicklertools-Konsole und führen Sie den folgenden Befehl aus:

   console.log(
   "Native HTML Imports?", 'import' in document.createElement('link'),
   "Native Custom Elements v0?", 'registerElement' in document,
   "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));
   

   Wenn alles wie erwartet funktioniert, sollte Folgendes angezeigt werden:

   Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
   

   Wenn der Browser für eine oder alle dieser Funktionen „true“ zurückgibt, liegt ein Fehler vor. Beenden Sie Chrome unbedingt vollständig, bevor Sie mit den Flags neu starten.

5. Laden Sie schließlich Ihre Anwendung und führen Sie die Funktionen durch. Wenn alles wie erwartet funktioniert, sind Sie fertig.

Verwende die v0-Polyfills

Die Polyfills für Web Components v0 bieten Unterstützung für die v0 APIs in Browsern, die keine native Unterstützung bieten. Wenn deine Website nicht in Chrome funktioniert, obwohl die APIs v0 deaktiviert sind, werden die Polyfills wahrscheinlich nicht geladen. Es gibt mehrere Möglichkeiten:

• Die Polyfills werden überhaupt nicht geladen. In diesem Fall sollte Ihre Website in anderen Browsern wie Firefox und Safari fehlschlagen.
• Du lädst die Polyfills basierend auf dem Browser-Sniffing bedingt. In diesem Fall sollte Ihre Website in anderen Browsern funktionieren. Fahre mit Polyfills laden fort.

In der Vergangenheit haben das Polymer Project-Team und andere empfohlen, die Polyfills basierend auf der Featureerkennung bedingt zu laden. Dieser Ansatz sollte funktionieren, wenn die v0 APIs deaktiviert sind.

v0-Polyfills installieren

Die Polyfills für Web Components v0 wurden nie in der npm-Registry veröffentlicht. Du kannst die Polyfills mit Bower installieren, wenn dein Projekt bereits Bower verwendet. Alternativ können Sie die Installation aus einer ZIP-Datei durchführen.

• Installation mit Bower:

  bower install --save webcomponents/webcomponentsjs#^0.7.0

• Laden Sie für die Installation aus einer ZIP-Datei die neueste Version 0.7.x von GitHub herunter:

  https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

  Wenn Sie die Installation aus einer ZIP-Datei durchführen, müssen Sie die Polyfills manuell aktualisieren, wenn eine andere Version veröffentlicht wird. Am besten prüfst du die Polyfills mit deinem Code.

Lade die v0-Polyfills

Die Polyfills für Web Components v0 werden in zwei separaten Bundles bereitgestellt:

webcomponents-min.js	Enthält alle Polyfills. Dieses Bundle enthält das Schatten-DOM-Polyfill, das viel größer als die anderen Polyfills ist und eine größere Auswirkung auf die Leistung hat. Verwenden Sie dieses Bundle nur, wenn Sie Shadow DOM-Unterstützung benötigen.
webcomponents-lite-min.js	Enthält alle Polyfills mit Ausnahme des Schatten-DOM. Hinweis: Nutzer von Polymer 1.x sollten dieses Bundle auswählen, da die Shadow DOM-Emulation direkt in der Polymer-Bibliothek enthalten war. Nutzer von Polymer 2.x benötigen eine andere Version der Polyfills. Weitere Informationen finden Sie im Blogpost zum Polymer-Projekt.

Im Polyfill-Paket für Webkomponenten sind auch einzelne Polyfills verfügbar. Die separate Verwendung einzelner Polyfills ist ein Thema für Fortgeschrittene, das hier nicht behandelt wird.

So laden Sie die Polyfills bedingungslos:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

Oder:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

Wenn du die Polyfills direkt von GitHub installiert hast, musst du den Pfad angeben, in dem du die Polyfills installiert hast.

Wenn die Polyfills basierend auf der Funktionserkennung bedingt geladen werden, sollte Ihre Website weiterhin funktionieren, nachdem die V0-Unterstützung entfernt wurde.

Wenn Sie die Polyfills mithilfe von Browser-Sniffing (d. h. in anderen Browsern als Chrome) laden, schlägt Ihre Website fehl, wenn die V0-Unterstützung aus Chrome entfernt wird.

Was kann ich tun? Ich weiß nicht, welche APIs ich verwende.

Falls Sie nicht wissen, ob Sie v0 APIs oder welche APIs Sie verwenden, können Sie die Konsolenausgabe in Chrome überprüfen.

1. Wenn Sie Chrome zuvor mit den Flags gestartet haben, um die APIs v0 zu deaktivieren, schließen Sie Chrome und starten Sie den Browser normal neu.
2. Öffnen Sie einen neuen Chrome-Tab und laden Sie Ihre Website.
3. Drücken Sie Strg + Umschalttaste + J (Windows, Linux, ChromeOS) oder Befehlstaste + Wahltaste + J (Mac), um die Entwicklertools-Konsole zu öffnen.
4. Prüfen Sie die Konsolenausgabe auf Einstellungsmeldungen. Wenn die Konsolenausgabe sehr groß ist, geben Sie in das Feld Filter „Verwerfen“ ein.

Für jede v0 API, die Sie verwenden, sollten Sie entsprechende Meldungen erhalten. Die obige Ausgabe zeigt Nachrichten für HTML-Importe, benutzerdefinierte Elemente v0 und Shadow DOM v0.

Wenn du eine oder mehrere dieser APIs verwendest, findest du weitere Informationen unter v0-Polyfills verwenden.

Nächste Schritte: Wechsel von v0

Wenn die v0-Polyfills geladen werden, funktioniert deine Website auch nach dem Entfernen der v0-APIs weiterhin. Wir empfehlen den Wechsel zu den Web Components v1 APIs, die umfassend unterstützt werden.

Wenn Sie eine Webkomponentenbibliothek wie die Polymer-Bibliothek, X-Tag oder SkateJS verwenden, sollten Sie zuerst prüfen, ob neuere Versionen der Bibliothek verfügbar sind, die APIs der Version 1 unterstützen.

Wenn Sie eine eigene Bibliothek haben oder benutzerdefinierte Elemente ohne Bibliothek geschrieben haben, müssen Sie auf die neuen APIs aktualisieren. Diese Ressourcen könnten hilfreich sein:

• Neu in Custom Elements
• Das ist neu in Shadow DOM v1

Zusammenfassung

Die API-Entwürfe für Web Components v0 werden eingestellt. Wenn du nur eine Sache aus diesem Beitrag mitnehmen kannst, solltest du deine App mit deaktivierten V0-APIs testen und die Polyfills nach Bedarf laden.

Wir empfehlen Ihnen langfristig ein Upgrade auf die neuesten APIs und die Verwendung von Webkomponenten.