Komponen Web mendapatkan dukungan lintas browser, komunitasnya terus berkembang dengan pesat, dan ada katalog Komponen Web baru untuk menemukan komponen yang Anda butuhkan dengan tepat.
Pernah ingin membangun komponen JavaScript mandiri, yang dapat Anda mudah digunakan di berbagai proyek atau dibagikan dengan pengembang lain terlepas dari framework JavaScript apa yang mereka gunakan? Komponen Web mungkin untuk Anda.
Komponen Web adalah seperangkat 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 keunggulan elemen bawaan - elemen kustom
dapat memiliki properti dan metode, mengaktifkan dan merespons peristiwa, dan bahkan memiliki
gaya yang dienkapsulasi dan pohon DOM untuk
membawa tampilan dan nuansanya sendiri.
Dengan menyediakan model komponen tingkat rendah berbasis platform, {i>Web Components<i} memungkinkan Anda membuat dan membagikan elemen yang dapat digunakan kembali untuk semuanya, mulai dari tombol khusus hingga tampilan yang kompleks seperti pemilih tanggal. Karena Komponen Web dibangun dengan platform yang menyertakan primitif enkapsulasi yang canggih, Anda bahkan dapat menggunakan komponen di dalam library atau framework JavaScript lain seolah-olah elemen DOM standar.
Anda mungkin pernah mendengar tentang {i>Web Components<i} sebelumnya - versi awal dari Web Spesifikasi komponen - v0 - dikirimkan di Chrome 33.
Hari ini, berkat kolaborasi luas antara vendor browser, generasi berikutnya dari spesifikasi Komponen Web - v1 - mendapatkan dukungan luas. Chrome mendukung dua spesifikasi utama yang membentuk Komponen Web - Shadow DOM dan Kustom Elements - mulai Chrome 53 dan Chrome 54. Safari menghadirkan dukungan untuk Shadow DOM v1 di Safari 10, dan telah selesai implementasi Custom Elements v1 di WebKit. Firefox adalah yang sedang dikembangkan Shadow DOM dan Kustom Elemen v1, dan keduanya Bayangan DOM dan Kustom Elements ada dalam rencana Edge.
Untuk mendefinisikan elemen khusus baru menggunakan implementasi v1, Anda cukup membuat
class baru yang memperluas HTMLElement
menggunakan sintaksis ES6 dan mendaftarkannya dengan
browser:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
Spesifikasi v1 yang baru sangat hebat - kami telah mengumpulkan tutorial tentang cara menggunakan Elemen Kustom v1 dan Shadow DOM v1 untuk membantu Anda memulai.
webcomponents.org
Komunitas Komponen Web juga berkembang dengan pesat. Kami senang untuk melihat peluncuran situs webcomponents.org - titik fokus dari komunitas komponen web - termasuk katalog terintegrasi bagi pengembang untuk membagikan elemen-elemennya.
Situs webcomponents.org berisi informasi tentang Komponen Web spesifikasi, pembaruan, dan konten dari web komunitas komponen, dan menampilkan dokumentasi untuk open source elemen dan koleksi elemen yang dibuat oleh pengembang lain.
Anda dapat mulai membuat elemen pertama Anda menggunakan library seperti Polimer, atau cukup gunakan Web tingkat rendah Component API secara langsung. Kemudian publikasikan elemen di webcomponents.org.
Selamat!