Update Komponen Web - lebih banyak waktu untuk mengupgrade ke API v1

Web Components v1 API adalah standar platform web yang telah disertakan di Chrome, Safari, Firefox, dan (segera) Edge. API v1 digunakan oleh jutaan situs, yang menjangkau miliaran pengguna setiap hari. Developer yang menggunakan API draf v0 memberikan masukan berharga yang memengaruhi spesifikasi. Namun, API v0 hanya didukung oleh Chrome. Untuk memastikan interoperabilitas, akhir tahun lalu, kami mengumumkan bahwa API draf ini tidak digunakan lagi dan dijadwalkan untuk dihapus mulai Chrome 73.

Karena cukup banyak developer yang meminta lebih banyak waktu untuk bermigrasi, API tersebut belum dihapus dari Chrome. API draf v0 kini ditargetkan untuk dihapus di Chrome 80, sekitar Februari 2020.

Berikut hal-hal yang perlu Anda ketahui jika Anda yakin bahwa Anda mungkin menggunakan API v0:

• Uji situs Anda dengan API v0 dinonaktifkan. Jika situs Anda berfungsi seperti yang diharapkan, selamat! Selesai. Lihat Kembali ke masa lalu: menonaktifkan API v0 untuk mengetahui petunjuknya.
• Jika Anda menggunakan library Polymer v1 atau v2—ikuti petunjuk yang dipublikasikan sebelumnya oleh tim Polymer.
• Jika menggunakan shadow DOM v0, elemen kustom v0, atau impor HTML, Anda harus memuat beberapa polyfill. Lihat Menggunakan polyfill v0.
• Jika Anda tidak yakin dengan versi yang digunakan, jangan khawatir. Lihat Bantuan! Saya tidak tahu API apa yang saya gunakan.

Kembali ke masa depan: menonaktifkan API v0

Untuk menguji situs dengan API v0 yang dinonaktifkan, Anda harus memulai Chrome dari command line dengan flag berikut:

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

Anda harus keluar dari Chrome sebelum memulainya dari command line. Jika telah menginstal Chrome Canary, Anda dapat menjalankan pengujian di Canary sambil tetap memuat halaman ini di Chrome.

Untuk menguji situs Anda dengan API v0 dinonaktifkan:

1. Jika Anda menggunakan Mac OS, buka chrome://version untuk menemukan jalur yang dapat dieksekusi untuk Chrome. Anda akan memerlukan jalur di langkah 3.
2. Keluar dari Chrome.

3. Mulai ulang Chrome dengan flag command line:

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

   Untuk mengetahui petunjuk cara memulai Chrome dengan flag, lihat Menjalankan Chromium dengan flag. Misalnya, di Windows, Anda dapat menjalankan:

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

4. Untuk memeriksa kembali apakah Anda telah memulai browser dengan benar, buka tab baru, buka konsol DevTools, dan jalankan perintah berikut:

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

   Jika semuanya berfungsi seperti yang diharapkan, Anda akan melihat:

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

   Jika browser melaporkan benar untuk salah satu atau semua fitur ini, ada yang salah. Pastikan Anda telah keluar sepenuhnya dari Chrome sebelum memulai ulang dengan flag.

5. Terakhir, muat aplikasi Anda dan jalankan fitur. Jika semuanya berfungsi seperti yang diharapkan, Anda telah selesai.

Menggunakan polyfill v0

Polyfill Web Components v0 menyediakan dukungan untuk v0 API di browser yang tidak menyediakan dukungan native. Jika situs Anda tidak berfungsi di Chrome dengan API v0 dinonaktifkan, Anda mungkin tidak memuat polyfill. Ada beberapa kemungkinan:

• Anda tidak memuat polyfill sama sekali. Dalam hal ini, situs Anda akan gagal di browser lain, seperti Firefox dan Safari.
• Anda memuat polyfill secara bersyarat berdasarkan sniffing browser. Dalam hal ini, situs Anda akan berfungsi di browser lain. Lanjutkan ke Memuat polyfill.

Sebelumnya, tim Project Polymer dan lainnya telah merekomendasikan untuk memuat polyfill secara bersyarat berdasarkan deteksi fitur. Pendekatan ini akan berfungsi dengan baik jika API v0 dinonaktifkan.

Menginstal polyfill v0

Polyfill Web Components v0 tidak pernah dipublikasikan ke registry npm. Anda dapat menginstal polyfill menggunakan Bower, jika project Anda sudah menggunakan Bower. Atau, Anda dapat menginstal dari file zip.

• Untuk menginstal dengan Bower:

  bower install --save webcomponents/webcomponentsjs#^0.7.0

• Untuk menginstal dari file ZIP, download rilis 0.7.x terbaru dari GitHub:

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

  Jika menginstal dari file zip, Anda harus memperbarui polyfill secara manual jika versi lain dirilis. Sebaiknya periksa polyfill dengan kode Anda.

Memuat polyfill v0

Polyfill Web Components v0 disediakan sebagai dua paket terpisah:

Ada juga polyfill individual yang tersedia sebagai bagian dari paket polyfill Komponen Web. Menggunakan setiap polyfill secara terpisah adalah topik lanjutan, yang tidak dibahas di sini.

Untuk memuat polyfill tanpa syarat:

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

Atau:

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

Jika menginstal polyfill langsung dari GitHub, Anda harus memberikan jalur tempat menginstal polyfill.

Jika Anda memuat polyfill secara kondisional berdasarkan deteksi fitur, situs Anda akan terus berfungsi saat dukungan v0 dihapus.

Jika Anda memuat polyfill secara kondisional menggunakan sniffing browser (yaitu, memuat polyfill di browser non-Chrome), situs Anda akan gagal saat dukungan v0 dihapus dari Chrome.

Tolong bantu saya. Saya tidak tahu API apa yang saya gunakan.

Jika tidak tahu apakah Anda menggunakan API v0 atau API mana yang Anda gunakan, Anda dapat memeriksa output konsol di Chrome.

1. Jika sebelumnya Anda memulai Chrome dengan flag untuk menonaktifkan v0 API, tutup Chrome dan mulai ulang secara normal.
2. Buka tab Chrome baru dan muat situs Anda.
3. Tekan Control+Shift+J (Windows, Linux, ChromeOS) atau Command+Option+J (Mac) untuk membuka Konsol DevTools.
4. Periksa output konsol untuk menemukan pesan penghentian penggunaan. Jika ada banyak output konsol, masukkan "Penghentian" di kotak Filter.

Anda akan melihat pesan penghentian penggunaan untuk setiap API v0 yang Anda gunakan. Output di atas menampilkan pesan untuk HTML Imports, elemen kustom v0, dan shadow DOM v0.

Jika Anda menggunakan satu atau beberapa API ini, lihat Menggunakan polyfill v0.

Langkah berikutnya: beralih dari v0

Memastikan polyfill v0 dimuat akan memastikan situs Anda terus berfungsi saat API v0 dihapus. Sebaiknya beralih ke Web Components v1 API, yang didukung secara luas.

Jika Anda menggunakan library Komponen Web, seperti library Polymer, X-Tag, atau SkateJS, langkah pertamanya adalah memeriksa apakah versi library yang lebih baru tersedia dan mendukung v1 API.

Jika memiliki library sendiri, atau menulis elemen kustom tanpa library, Anda harus mengupdate ke API baru. Referensi berikut mungkin membantu:

• Yang Baru di Elemen Kustom
• Yang Baru di Shadow DOM v1

Merangkum

API draf Web Components v0 akan dihentikan. Jika Anda mengambil satu hal dari postingan ini, pastikan Anda menguji aplikasi dengan API v0 dinonaktifkan dan memuat polyfill sesuai kebutuhan.

Untuk jangka panjang, sebaiknya upgrade ke API terbaru, dan terus gunakan Komponen Web.