Halaman ini diterjemahkan oleh Cloud Translation API.

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

Jonathan Bingham

Arthur Evans

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

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

Berikut adalah hal yang perlu diketahui jika Anda yakin mungkin menggunakan API v0:

Uji situs Anda dengan API v0 yang dinonaktifkan. Jika situs Anda berfungsi seperti yang diharapkan, selamat! Tugas Anda sudah selesai! Lihat Kembali ke masa mendatang: menonaktifkan API v0 untuk mendapatkan petunjuk.
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 apa yang Anda gunakan, jangan khawatir. Lihat Bantuan. Saya tidak tahu API apa yang sedang 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 tanda 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:

Jika Anda menggunakan Mac OS, jelajahi chrome://version untuk menemukan jalur yang dapat dieksekusi untuk Chrome. Anda memerlukan jalur di langkah 3.
Keluar dari Chrome.
Mulai ulang Chrome dengan tanda command line:

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

Untuk petunjuk tentang cara memulai Chrome dengan tanda, lihat Menjalankan Chromium dengan tanda. Misalnya, di Windows, Anda mungkin menjalankan:
```
chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
```
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 true untuk salah satu atau semua fitur ini, berarti ada sesuatu yang salah. Pastikan Anda telah sepenuhnya keluar dari Chrome sebelum memulai ulang dengan tanda tersebut.
Terakhir, muat aplikasi Anda dan jalankan seluruh fiturnya. Jika semuanya berfungsi seperti yang diharapkan, maka Anda sudah selesai.

Menggunakan polyfill v0

Polyfill v0 Web Components menyediakan dukungan untuk API v0 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. Jika demikian, situs Anda seharusnya gagal di browser lain, seperti Firefox dan Safari.
Anda memuat polyfill secara bersyarat berdasarkan sniffing browser. Dalam hal ini, situs Anda seharusnya berfungsi di browser lain. Lanjutkan ke bagian Memuat polyfill.

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

Menginstal polyfill v0

Polyfill v0 Komponen Web 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 muncul. Sebaiknya periksa polyfill dalam kode Anda.

Memuat polyfill v0

Polyfill v0 Komponen Web disediakan sebagai dua paket terpisah:

`webcomponents-min.js`	Mencakup semua polyfill. Paket ini mencakup polyfill shadow DOM, yang jauh lebih besar daripada polyfill lainnya, dan memiliki dampak performa yang lebih besar. Hanya gunakan paket ini jika Anda memerlukan dukungan shadow DOM.
`webcomponents-lite-min.js`	Menyertakan semua polyfill kecuali untuk shadow DOM. Catatan: Pengguna Polymer 1.x harus memilih paket ini, karena emulasi Shadow DOM disertakan langsung di library Polymer. Pengguna Polymer 2.x memerlukan versi polyfill yang berbeda. Lihat postingan blog Project Polymer untuk mengetahui detailnya.

Ada juga polyfill individual yang tersedia sebagai bagian dari paket polyfill Komponen Web. Menggunakan polyfill individual 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 menyediakan jalur tempat Anda menginstal polyfill.

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

Jika Anda memuat polyfill secara bersyarat menggunakan sniffing browser (yaitu memuat polyfill pada browser non-Chrome), situs Anda akan gagal jika dukungan v0 dihapus dari Chrome.

Tolong bantuannya. Saya tidak tahu API apa yang sedang saya gunakan.

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

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

Jendela konsol yang menampilkan peringatan penghentian penggunaan

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

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

Langkah berikutnya: beralih dari v0

Dengan memastikan polyfill v0 dimuat, situs Anda dapat 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 yang mendukung API v1.

Jika memiliki library sendiri, atau menulis elemen kustom tanpa library, Anda harus melakukan update ke API baru. Referensi ini dapat membantu:

Mengambil kesimpulan

Draf API Komponen Web v0 akan dihentikan. Jika memposting satu hal dari postingan ini, pastikan Anda menguji aplikasi dengan API v0 yang dinonaktifkan dan memuat polyfill sesuai kebutuhan.

Untuk jangka panjang, kami mendorong Anda untuk meningkatkan versi ke API terbaru, dan tetap menggunakan Komponen Web!