Diese Seite wurde von der Cloud Translation API übersetzt.

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 implementiert ist. Die V1-APIs werden von Millionen von Websites verwendet und erreichen täglich Milliarden von Nutzern. Entwickler, die die API-Entwürfe der Version 0 verwendet haben, haben wertvolles Feedback gegeben, das sich auf die Spezifikationen ausgewirkt hat. Die V0-APIs wurden jedoch nur von Chrome unterstützt. Um die Interoperabilität zu gewährleisten, haben wir Ende letzten Jahres angekündigt, dass diese API-Entwürfe eingestellt und ab Chrome 73 entfernt werden.

Da genügend Entwickler mehr Zeit für die Migration angefordert haben, wurden die APIs noch nicht aus Chrome entfernt. Die v0-APIs werden voraussichtlich in Chrome 80, also etwa im Februar 2020, entfernt.

Wenn Sie vermuten, dass Sie die V0-APIs verwenden, sollten Sie Folgendes wissen:

Testen Sie Ihre Website mit deaktivierten v0 APIs. Wenn Ihre Website wie erwartet funktioniert, herzlichen Glückwunsch! Fertig. Eine Anleitung dazu finden Sie unter Zurück in die Zukunft: Deaktivierung der V0-APIs.
Wenn Sie die Polymer-Bibliothek v1 oder v2 verwenden, folgen Sie der bisher 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 finden Sie unter Polyfills der Version 0 verwenden.
Keine Sorge, wenn Sie sich nicht sicher sind, welche Version Sie verwenden. Hilfe! Ich weiß nicht, welche APIs ich verwende.

Zurück in die Zukunft: Deaktivierung der v0 APIs

Wenn Sie Ihre Website mit deaktivierten v0-APIs testen möchten, müssen Sie Chrome über die Befehlszeile mit den folgenden Flags starten:

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

Sie müssen Chrome beenden, bevor Sie es über die Befehlszeile starten. 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:

Wenn Sie Mac OS verwenden, rufen Sie chrome://version auf, um den Pfad zur ausführbaren Chrome-Datei zu finden. Sie benötigen den Pfad in Schritt 3.
Beenden Sie Chrome.
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
```
Öffnen Sie einen neuen Tab, öffnen Sie die DevTools-Konsole und führen Sie den folgenden Befehl aus, um zu prüfen, ob Sie den Browser richtig gestartet haben:
```
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, sollten Sie Folgendes sehen:
```
Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
```
Wenn der Browser für eine oder alle dieser Funktionen „wahr“ meldet, stimmt etwas nicht. Schließen Sie Chrome vollständig, bevor Sie ihn mit den Flags neu starten.
Laden Sie abschließend Ihre App und testen Sie die Funktionen. Wenn alles wie erwartet funktioniert, ist die Einrichtung abgeschlossen.

Polyfills der Version 0 verwenden

Die Web Components v0-Polyfills unterstützen die v0-APIs in Browsern, die keine native Unterstützung bieten. Wenn Ihre Website in Chrome nicht funktioniert, wenn die v0-APIs deaktiviert sind, werden wahrscheinlich die Polyfills nicht geladen. Es gibt mehrere Möglichkeiten:

Die Polyfills werden gar nicht geladen. In diesem Fall sollte Ihre Website in anderen Browsern wie Firefox und Safari nicht funktionieren.
Sie laden die Polyfills bedingt basierend auf Browser-Sniffing. In diesem Fall sollte Ihre Website in anderen Browsern funktionieren. Fahren Sie mit Polyfills laden fort.

In der Vergangenheit haben das Polymer-Projektteam und andere empfohlen, die Polyfills bedingt basierend auf der Funktionserkennung zu laden. Dieser Ansatz sollte auch bei deaktivierten V0-APIs funktionieren.

Polyfills der Version 0 installieren

Die Web Components v0-Polyfills wurden nie in der npm-Registry veröffentlicht. Sie können die Polyfills mit Bower installieren, wenn in Ihrem Projekt bereits Bower verwendet wird. Sie können die Installation auch über eine ZIP-Datei ausführen.

So installieren Sie es mit Bower:

bower install --save webcomponents/webcomponentsjs#^0.7.0
Wenn Sie die Installation über eine ZIP-Datei ausführen möchten, laden Sie den neuesten Release 0.7.x von GitHub herunter:

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

Wenn Sie über eine ZIP-Datei installieren, müssen Sie die Polyfills manuell aktualisieren, wenn eine neue Version veröffentlicht wird. Sie sollten die Polyfills in Ihrem Code einbinden.

Polyfills der Version 0 laden

Die Web Components v0-Polyfills werden als zwei separate Bundles bereitgestellt:

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

Im Web Components polyfill-Paket sind auch einzelne Polyfills verfügbar. Die separate Verwendung einzelner Polyfills ist ein fortgeschrittenes Thema, 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 Sie die Polyfills direkt von GitHub installiert haben, müssen Sie den Pfad angeben, unter dem Sie sie installiert haben.

Wenn Sie die Polyfills bedingt basierend auf der Funktionserkennung laden, sollte Ihre Website auch nach der Entfernung der Unterstützung für Version 0 funktionieren.

Wenn Sie die polyfills bedingt mithilfe von Browser-Sniffing laden (d. h. die polyfills in anderen Browsern als Chrome laden), funktioniert Ihre Website nicht, wenn die Unterstützung für Version 0 aus Chrome entfernt wird.

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

Wenn Sie nicht wissen, ob Sie eine der V0-APIs verwenden oder welche APIs Sie verwenden, können Sie die Konsolenausgabe in Chrome prüfen.

Wenn Sie Chrome zuvor mit den Flags gestartet haben, um die v0 APIs zu deaktivieren, schließen Sie Chrome und starten Sie es normal neu.
Öffnen Sie einen neuen Chrome-Tab und laden Sie Ihre Website.
Drücken Sie Strg + Umschalttaste + J (Windows, Linux, ChromeOS) oder Befehlstaste + Wahltaste + J (Mac), um die Console der DevTools zu öffnen.
Prüfen Sie die Konsolenausgabe auf Meldungen zur Einstellung. Wenn die Console-Ausgabe sehr lang ist, geben Sie „Einstellung“ in das Feld Filter ein.

Console-Fenster mit Warnungen zur Einstellung

Sie sollten für jede von Ihnen verwendete V0-API eine entsprechende Meldung sehen. In der obigen Ausgabe sind Meldungen für HTML Imports, Custom Elements v0 und Shadow DOM v0 zu sehen.

Wenn Sie eine oder mehrere dieser APIs verwenden, lesen Sie den Hilfeartikel Polyfills der Version 0 verwenden.

Nächste Schritte: Version 0 nicht mehr verwenden

Wenn die V0-Polyfills geladen werden, sollte Ihre Website auch nach dem Entfernen der V0-APIs funktionieren. Wir empfehlen die Migration zu den Web Components v1 APIs, die weithin unterstützt werden.

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

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

Zusammenfassung

Die Web Components v0-API-Entwürfe werden eingestellt. Wenn Sie sich nur eine Sache aus diesem Beitrag merken, dann sollten Sie Ihre App mit deaktivierten v0-APIs testen und die Polyfills nach Bedarf laden.

Wir empfehlen Ihnen, auf die neuesten APIs umzustellen und weiterhin Webkomponenten zu verwenden.