Komponen Web v1 - generasi berikutnya

Komponen Web mendapatkan dukungan lintas browser, komunitas ini tumbuh dengan pesat, dan terdapat katalog Komponen Web baru untuk menemukan komponen yang Anda butuhkan.

Taylor Savage
Taylor Savage

Pernah ingin membuat komponen JavaScript mandiri, yang dapat dengan mudah digunakan di beberapa project atau dibagikan dengan developer lain, terlepas dari framework JavaScript yang mereka gunakan? Komponen Web mungkin cocok untuk Anda.

Komponen Web adalah serangkaian fitur platform web baru yang memungkinkan Anda membuat elemen HTML Anda sendiri. Setiap elemen khusus baru dapat memiliki tag khusus seperti <my-button>, dan memiliki semua manfaat elemen bawaan - elemen khusus dapat memiliki properti dan metode, mengaktifkan dan merespons peristiwa, dan bahkan memiliki gaya dan hierarki DOM yang dienkapsulasi untuk menghadirkan tampilan dan nuansanya sendiri.

Animasi elemen progres kertas.

Dengan menyediakan model komponen tingkat rendah berbasis platform, Komponen Web memungkinkan Anda membuat dan membagikan elemen yang dapat digunakan kembali untuk segala hal, mulai dari tombol khusus hingga tampilan kompleks seperti pemilih tanggal. Karena Komponen Web dibuat dengan API platform yang menyertakan primitif enkapsulasi yang canggih, Anda bahkan dapat menggunakan komponen ini dalam library atau framework JavaScript lainnya seolah-olah merupakan elemen DOM standar.

Anda mungkin pernah mendengar tentang Komponen Web sebelumnya - versi awal spesifikasi Komponen Web - v0 - dihadirkan di Chrome 33.

Hari ini, berkat kolaborasi luas antara vendor browser, spesifikasi Komponen Web generasi berikutnya - v1 - mendapatkan dukungan yang luas. Chrome mendukung dua spesifikasi utama yang membentuk Komponen Web - Shadow DOM dan Elemen Kustom- masing-masing pada Chrome 53 dan Chrome 54. Safari mengirimkan dukungan untuk Shadow DOM v1 di Safari 10, dan telah menyelesaikan implementasi Custom Elements v1 di WebKit. Firefox saat ini sedang mengembangkan Shadow DOM dan Custom Elements v1, serta Shadow DOM dan Custom Elements termasuk dalam roadmap untuk Edge.

Untuk menentukan elemen kustom baru menggunakan implementasi v1, cukup buat class baru yang memperluas HTMLElement menggunakan sintaksis ES6 dan daftarkan ke browser:

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

Spesifikasi v1 yang baru sangat canggih - kami telah mengumpulkan tutorial tentang penggunaan Custom Elements v1 dan Shadow DOM v1 untuk membantu Anda memulai.

webcomponents.org

Komunitas Komponen Web juga berkembang pesat. Kami senang melihat peluncuran situs webcomponents.org yang telah diperbarui - titik fokus komunitas komponen web - termasuk katalog terintegrasi bagi developer untuk membagikan elemen mereka.

webcomponents.org

Situs webcomponents.org berisi informasi tentang spesifikasi Komponen Web, pembaruan, dan konten dari komunitas komponen web, serta menampilkan dokumentasi untuk elemen open-source dan kumpulan elemen yang dibuat oleh developer lain.

Anda dapat mulai membuat elemen pertama menggunakan library seperti Polymer Google, atau langsung menggunakan WebComponent API tingkat rendah. Kemudian, publikasikan elemen Anda di webcomponents.org.

Selamat membuat komponen!