Web Component & Polymer #5 : Ayo Koding

Ada 2 langkah dalam mengimplementasikan web components  pada polymer:
1.membuat custom element pada file html.
2.lalu memanggil custom element tsb ke dalam file index.html dengan perintah
    <link rel="import" href="custom-element-example.html">,
 kemudia menggunakan element tsb di antara tag body pada index.html
ex; <custom-element-example></custom-element-example>

saya akan memberi contoh menulis Hallo Broh pada web components.

1.Untuk memudahkan kita membedakan elemen bawaan polymer dengan elemen buatan kita sendiri saran saya buat satu folder lagi di dalam project kita bernama custom (terserah),uuntuk tempat elemen-elemen buatan kita sendiri.

2.buat file html pada folder yang kita buat tadi dengan nama misal hallo-broh.html
3.tulis script di bawah ini

   keterangan:
      1) file yang harus dipanggil saat kita akan membuat custom elemen baru
      2) nama tag yang akan kita gunakan dalam hal ini tag <hallo-broh></hallo-broh>

      3) letak content tag tsb misal di atas adalah tag h1
      4) tag <polymer-element> adalah untuk tempat semua aksi dan tampilan elemen tsb.
4.lalu simpan setelah itu buka file index.html
5.lalu tulis script di bawah ini.

  keterangan:
1) file yang harus dipanggil pada file index.html jika file tsb tidak dipanggil maka rel="import" tidak jalan karena itu merupakan attribut terbaru yang ditambahkan w3c untuk menggunakan webcomponents
2)jika kita ingin menggunakan element hallo-broh maka kita harus memanggil file tempat elemen hallo-broh itu dibuat tentunya karena ini elemen baru maka kita menggunakan  rel="import".
3)jika kita akan menampilkan elemen hallo-broh maka kita hanya menuliskan <hallo-broh></hallo-broh> saja.

6.lalu kita run file index itu coba kita run di chrome dev editor.

hasilnya

BY : MUHAMAD NUR FASIKHIN