Komponen Web mendapatkan dukungan lintas browser, komunitasnya berkembang pesat, dan ada katalog Komponen Web baru untuk menemukan komponen yang Anda butuhkan.
Pernah ingin membuat komponen JavaScript mandiri Anda sendiri, yang dapat Anda gunakan dengan mudah di beberapa project atau dibagikan kepada developer lain, apa pun 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 kustom baru dapat memiliki tag kustom seperti
<my-button>, dan memiliki semua keunggulan elemen bawaan - elemen kustom
dapat memiliki properti dan metode, memicu dan merespons peristiwa, dan bahkan memiliki
gaya yang dienkapsulasi dan hierarki DOM untuk menghadirkan tampilan dan nuansa mereka sendiri.
Dengan menyediakan model komponen tingkat rendah berbasis platform, Komponen Web memungkinkan Anda mem-build dan membagikan elemen yang dapat digunakan kembali untuk semua 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 elemen DOM standar.
Anda mungkin pernah mendengar Web Components sebelumnya - versi awal spesifikasi Web Components - v0 - dikirimkan di Chrome 33.
Saat ini, berkat kolaborasi yang luas antara vendor browser, spec Web Components generasi berikutnya - v1 - mendapatkan dukungan yang luas. Chrome mendukung dua spesifikasi utama yang membentuk Web Components - Shadow DOM dan Custom Elements - mulai dari 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 mengembangkan Shadow DOM dan Custom Elements v1, dan Shadow DOM serta Custom Elements ada dalam roadmap untuk Edge.
Untuk menentukan elemen kustom 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 canggih - kami telah menyusun tutorial tentang cara menggunakan 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 diperbarui - titik fokus komunitas komponen web - termasuk katalog terintegrasi bagi developer untuk membagikan elemen mereka.
Situs webcomponents.org berisi informasi tentang specs Komponen Web, update, dan konten dari komunitas komponen web, serta menampilkan dokumentasi untuk elemen open source dan koleksi elemen yang dibuat oleh developer lain.
Anda dapat mulai mem-build elemen pertama menggunakan library seperti Polymer Google, atau cukup gunakan Web Component API level rendah secara langsung. Kemudian, publikasikan elemen Anda di webcomponents.org.
Selamat melakukan pembuatan komponen.