Update voor webcomponenten - meer tijd om te upgraden naar v1 API's

De Web Components v1 API's zijn een webplatformstandaard die wordt geleverd in Chrome, Safari, Firefox en (binnenkort) Edge. De v1 API's worden door letterlijk miljoenen sites gebruikt en bereiken dagelijks miljarden gebruikers. Ontwikkelaars die de concept-v0-API's gebruikten, leverden waardevolle feedback die van invloed was op de specificaties. Maar de v0 API's werden alleen ondersteund door Chrome. Om de interoperabiliteit te garanderen, hebben we eind vorig jaar aangekondigd dat deze concept-API's zijn verouderd en vanaf Chrome 73 zullen worden verwijderd.

Omdat genoeg ontwikkelaars meer tijd vroegen om te migreren, zijn de API's nog niet uit Chrome verwijderd. Het is nu de bedoeling dat de v0-concept-API's rond februari 2020 worden verwijderd in Chrome 80 .

Dit is wat u moet weten als u denkt dat u mogelijk de v0 API's gebruikt:

• Test uw site terwijl de v0 API's zijn uitgeschakeld . Als uw site naar verwachting werkt: gefeliciteerd! Je bent klaar. Zie Terug naar de toekomst: de v0-API's uitschakelen voor instructies.
• Als u Polymer-bibliotheek v1 of v2 gebruikt, volgt u de instructies die eerder door het Polymer-team zijn gepubliceerd .
• Als u schaduw-DOM v0, aangepaste elementen v0 of HTML-import gebruikt, moet u enkele polyfills laden. Zie De v0-polyfills gebruiken .
• Als u niet zeker weet wat u gebruikt, hoeft u zich geen zorgen te maken. Zie Hulp! Ik weet niet welke API's ik gebruik!

Terug naar de toekomst: de v0 API's uitschakelen

Als u uw site wilt testen terwijl de v0-API's zijn uitgeschakeld, moet u Chrome starten vanaf de opdrachtregel met de volgende vlaggen:

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

U moet Chrome afsluiten voordat u het vanaf de opdrachtregel start. Als u Chrome Canary heeft geïnstalleerd, kunt u de test in Canary uitvoeren terwijl deze pagina in Chrome geladen blijft.

Uw site testen terwijl v0 API's zijn uitgeschakeld:

1. Als u Mac OS gebruikt, bladert u naar chrome://version om het uitvoerbare pad voor Chrome te vinden. Je hebt het pad uit stap 3 nodig.
2. Sluit Chrome af.

3. Start Chrome opnieuw met de opdrachtregelvlaggen:

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

   Zie Chromium uitvoeren met vlaggen voor instructies over het starten van Chrome met vlaggen. Op Windows kunt u bijvoorbeeld het volgende uitvoeren:

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

4. Om te controleren of u de browser correct hebt gestart, opent u een nieuw tabblad, opent u de DevTools-console en voert u de volgende opdracht uit:

   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'));
   

   Als alles werkt zoals verwacht, zou u het volgende moeten zien:

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

   Als de browser waar meldt voor een of meer van deze functies, is er iets mis. Zorg ervoor dat u Chrome volledig heeft afgesloten voordat u opnieuw opstart met de vlaggen.

5. Laad ten slotte uw app en doorloop de functies. Als alles werkt zoals verwacht, bent u klaar.

Gebruik de v0 polyfills

De polyfills van Web Components v0 bieden ondersteuning voor de v0 API's in browsers die geen native ondersteuning bieden. Als uw site niet werkt in Chrome terwijl de v0 API's zijn uitgeschakeld, laadt u waarschijnlijk de polyfills niet. Er zijn verschillende mogelijkheden:

• Je laadt de polyfills helemaal niet. In dit geval zou uw site moeten mislukken in andere browsers, zoals Firefox en Safari.
• U laadt de polyfills voorwaardelijk op basis van browser sniffing. In dit geval zou uw site in andere browsers moeten werken. Ga verder naar De polyfills laden .

In het verleden hebben het Polymer Project-team en anderen aanbevolen de polyfills voorwaardelijk te laden op basis van featuredetectie. Deze aanpak zou prima moeten werken als de v0-API's zijn uitgeschakeld.

Installeer de v0-polyfills

De polyfills van Web Components v0 zijn nooit gepubliceerd in het npm-register. U kunt de polyfills installeren met Bower als uw project al gebruik maakt van Bower. Of u kunt installeren vanuit een zipbestand.

• Installeren met Bower:

  bower install --save webcomponents/webcomponentsjs#^0.7.0

• Om vanuit een zipbestand te installeren, downloadt u de nieuwste 0.7.x-release van GitHub:

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

  Als u installeert vanuit een zipbestand, moet u de polyfills handmatig bijwerken als er een andere versie uitkomt. Waarschijnlijk wilt u de polyfills met uw code inchecken.

Laad de v0-polyfills

De Web Components v0 polyfills worden geleverd als twee afzonderlijke bundels:

Er zijn ook individuele polyfills beschikbaar als onderdeel van het Web Components polyfill-pakket. Het afzonderlijk gebruiken van individuele polyfills is een onderwerp voor gevorderden, dat hier niet wordt behandeld.

Om de polyfills onvoorwaardelijk te laden:

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

Of:

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

Als je de polyfills rechtstreeks vanuit GitHub hebt geïnstalleerd, moet je het pad opgeven waar je de polyfills hebt geïnstalleerd.

Als u de polyfills voorwaardelijk laadt op basis van functiedetectie, zou uw site moeten blijven werken wanneer v0-ondersteuning wordt verwijderd.

Als u de polyfills voorwaardelijk laadt met browsersniffing (dat wil zeggen, de polyfills laadt in niet-Chrome-browsers), mislukt uw site wanneer v0-ondersteuning uit Chrome wordt verwijderd.

Hulp! Ik weet niet welke API's ik gebruik!

Als u niet weet of u een van de v0 API's gebruikt (of welke API's u gebruikt), kunt u de console-uitvoer in Chrome controleren.

1. Als u Chrome eerder heeft gestart met de vlaggen om de v0 API's uit te schakelen, sluit u Chrome en start u het programma normaal opnieuw op.
2. Open een nieuw Chrome-tabblad en laad uw site.
3. Druk op Control+Shift+J (Windows, Linux, ChromeOS) of Command+Option+J (Mac) om de DevTools- console te openen.
4. Controleer de console-uitvoer op beëindigingsberichten. Als er veel console-uitvoer is, voert u 'Beëindiging' in het filtervak ​​in.

U zou beëindigingsberichten moeten zien voor elke v0-API die u gebruikt. De bovenstaande uitvoer toont berichten voor HTML-imports, aangepaste elementen v0 en schaduw-DOM v0.

Als u een of meer van deze API's gebruikt, raadpleegt u De v0-polyfills gebruiken .

Volgende stappen: afstappen van v0

Als u ervoor zorgt dat de v0-polyfills worden geladen, moet uw site blijven werken wanneer de v0-API's worden verwijderd. We raden u aan over te stappen op de Web Components v1 API's, die breed worden ondersteund.

Als u een Web Components-bibliotheek gebruikt, zoals de Polymer-bibliotheek, X-Tag of SkateJS, is de eerste stap het controleren of er nieuwere versies van de bibliotheek beschikbaar zijn die de v1 API's ondersteunen.

Als je je eigen bibliotheek hebt, of aangepaste elementen hebt geschreven zonder bibliotheek, moet je updaten naar de nieuwe API's. Deze bronnen kunnen helpen:

• Wat is er nieuw in aangepaste elementen
• Wat is er nieuw in Shadow DOM v1

Opsommen

De concept-API's van Web Components v0 verdwijnen. Als je één ding uit dit bericht haalt, zorg er dan voor dat je je app test met de v0 API's uitgeschakeld en de polyfills indien nodig laadt .

Voor de lange termijn raden we u aan om te upgraden naar de nieuwste API's en webcomponenten te blijven gebruiken!