Polimer - Elemen Kustom

Polimer adalah kerangka kerja yang memungkinkan pembuatan elemen khusus menggunakan elemen HTML standar. Elemen web kustom menyediakan fitur-fitur berikut -

Ini memberikan nama elemen khusus dengan kelas asosiasi.
Saat Anda mengubah status instance elemen khusus, itu akan meminta callback siklus hidup.
Jika Anda mengubah atribut pada sebuah instance, maka panggilan balik akan diminta.

Anda dapat menentukan elemen khusus menggunakan kelas ES6 dan kelas dapat dikaitkan dengan elemen khusus seperti yang ditunjukkan pada kode berikut.

//ElementDemo class is extending the HTMLElement 
class ElementDemo extends HTMLElement { 
   // code here
};

//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);

Elemen khusus dapat digunakan sebagai elemen standar seperti yang ditunjukkan di bawah ini -

<element-demo></element-demo>

Note - Nama elemen khusus harus dimulai dengan huruf kecil dan berisi tanda hubung di antara nama.

Siklus Hidup Elemen Kustom

Daur hidup elemen khusus menyediakan sekumpulan reaksi elemen khusus yang bertanggung jawab atas perubahan dalam daur hidup elemen dan ditentukan dalam tabel berikut.

Sr.No.	Reaksi & Deskripsi
1	constructor Saat Anda membuat elemen atau menentukan elemen yang dibuat sebelumnya, reaksi elemen ini akan dipanggil.
2	connectedCallback Saat Anda menambahkan elemen ke dokumen, reaksi elemen ini akan dipanggil.
3	disconnectedCallback Saat Anda menghapus elemen dari dokumen, reaksi elemen ini akan dipanggil.
4	attributeChangedCallback Setiap kali Anda mengubah, menambahkan, menghapus, atau mengganti elemen dari dokumen, reaksi elemen ini akan dipanggil.

Peningkatan Elemen

Kita dapat menggunakan elemen khusus sebelum menentukannya dengan spesifikasi dan setiap contoh elemen yang ada akan ditingkatkan ke kelas khusus dengan menambahkan definisi ke elemen itu.

Status elemen kustom berisi nilai-nilai berikut -

uncustomized - Nama elemen khusus yang valid adalah elemen bawaan atau elemen yang tidak diketahui, yang tidak bisa menjadi elemen khusus.
undefined - Elemen dapat memiliki nama elemen khusus yang valid, tetapi tidak dapat ditentukan.
custom - Elemen dapat memiliki nama elemen khusus yang valid, yang dapat ditentukan dan ditingkatkan.
failed - Mencoba mengupgrade elemen gagal dari kelas yang tidak valid.

Mendefinisikan sebuah Elemen

Elemen kustom dapat ditentukan dengan membuat kelas yang memperluas Polymer.Element dan meneruskan kelas ke metode customElements.define. Kelas berisi adalah metode pengambil yang mengembalikan nama tag HTML dari elemen khusus. Misalnya -

//ElementDemo class is extending the Polymer.Element 
class ElementDemo extends Polymer.Element {
   static get is() { return 'element-demo'; }
   static get properties() {
      . . .
      . . .
   }
   constructor(){
      super();
      . . .
      . . .
   }
   . . .
   . . .
}

//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);

// create an instance with createElement
var el1 = document.createElement('element-demo');

Impor dan API

Elemen Polymer dapat ditentukan dengan menentukan tiga impor HTML berikut -

polymer-element.html - Ini menentukan kelas dasar Polymer.Element.
legacy-element.html- Ini memperluas Polymer.Element menggunakan kelas dasar Polymer.LegacyElement dan menambahkan API warisan kompatibel 1.x. Ini juga membuat elemen hibrid dengan menentukan metode pabrik Polymer () lama.
polymer.html - Terdiri dari kelas dasar Polimer bersama dengan elemen pembantu, yang termasuk dalam 1.x polymer.html.

Tentukan Elemen di Dokumen HTML Utama

Anda bisa mendefinisikan elemen dalam dokumen HTML utama menggunakan fungsi HTMLImports.whenReady ().

Contoh

Contoh berikut menunjukkan cara mendefinisikan elemen di dokumen HTML utama. Buat file index.html dan tambahkan kode berikut.

<!doctype html>
<html lang = "en">
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "define-element.html">
   </head>
   
   <body>
      <define-element></define-element>
   </body>
</html>

Sekarang buat elemen khusus yang disebut define-element.html dan sertakan kode berikut.

<dom-module id = "define-element">
   <template>
      <h2>Welcome to Tutorialspoint!!!</h2>
   </template>
   
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

Keluaran

Untuk menjalankan aplikasi, buka direktori proyek yang dibuat dan jalankan perintah berikut.

polymer serve

Sekarang buka browser dan arahkan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Tentukan Elemen Legacy

Elemen lama dapat digunakan untuk mendaftarkan elemen menggunakan fungsi Polimer, yang mengambil prototipe untuk elemen baru. Prototipe harus berisiis yang mendefinisikan nama tag HTML untuk elemen khusus.

Contoh

//registering an element
ElementDemo = Polymer ({
   is: 'element-demo',
   
   //it is a legecy callback, called when the element has been created
   created: function() {
     this.textContent = 'Hello World!!!';
   }
});

//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');

//use the constructor create an instance
var myelement2 = new ElementDemo();

Lifecycle Callbacks

Callback siklus hidup digunakan untuk menyelesaikan tugas-tugas untuk fitur bawaan Polymer.Elementkelas. Polymer menggunakan callback siap pakai, yang akan dipanggil saat Polymer selesai membuat dan menginisialisasi elemen DOM.

Berikut adalah daftar callback lama di Polymer.js.

created - Dipanggil saat Anda membuat elemen sebelum menyetel nilai properti dan menginisialisasi DOM lokal.
ready - Dipanggil saat Anda membuat elemen setelah menyetel nilai properti dan menginisialisasi DOM lokal.
attached - Disebut setelah melampirkan elemen ke dokumen dan dapat dipanggil lebih dari satu kali selama masa pakai elemen.
detached - Disebut setelah melepaskan elemen dari dokumen dan dapat dipanggil lebih dari sekali selama masa pakai elemen.
attributeChanged - Dipanggil ketika ada perubahan dalam atribut elemen dan menahan perubahan atribut, yang tidak kompatibel dengan properti yang dideklarasikan.

Mendeklarasikan Properti

Properti dapat dideklarasikan pada elemen untuk menambahkan nilai default dan fitur spesifik lainnya dalam sistem data dan mereka dapat digunakan untuk menentukan fitur berikut -

Ini menentukan jenis properti dan nilai default.
Ini memanggil metode pengamat, ketika ada perubahan pada nilai properti.
Ini menentukan status hanya baca untuk menghentikan perubahan tak terduga pada nilai properti.
Ini memberikan dukungan untuk data binding dua arah, yang memicu peristiwa saat Anda mengubah nilai properti.
Ini adalah properti yang dihitung, yang menghitung nilai secara dinamis tergantung pada properti lainnya.
Ini memperbarui dan mencerminkan nilai atribut yang sesuai, ketika Anda mengubah nilai properti.

Tabel berikut menunjukkan kunci untuk setiap properti, yang didukung oleh objek properti.

Sr.No.	Kunci & Deskripsi	Tipe
1	type Ini deserializes dari atribut yang tipe propertinya ditentukan menggunakan konstruktor tipe.	konstruktor (Boolean, Tanggal, Angka, String, Array atau Objek)
2	value Ini menentukan nilai default untuk properti dan jika itu adalah fungsi, maka itu menggunakan nilai yang dikembalikan sebagai nilai default dari properti.	boolean, angka, string atau fungsi.
3	reflectToAttribute Jika kunci ini disetel ke true, maka itu menetapkan atribut yang sesuai pada node host. Atribut dapat dibuat sebagai atribut boolean HTML standar, jika Anda menyetel nilai properti sebagai Boolean.	boolean
4	readOnly Anda tidak dapat menyetel properti secara langsung dengan penetapan atau pengikatan data, jika kunci ini disetel ke true.	boolean
5	notify Anda dapat menggunakan properti untuk data binding dua arah, jika kunci ini disetel ke true dan saat Anda mengubah properti, peristiwa yang diubah nama properti akan dipicu.	boolean
6	computed Anda dapat menghitung nilai argumen setiap kali berubah, dengan memanggil metode dan nilai akan disederhanakan sebagai nama metode dan daftar argumen.	tali
7	observer Panggil nama metode, yang disederhanakan dengan nilai, ketika nilai properti berubah.	tali

Atribut Deserialization

Deserialisasi nama properti yang cocok dengan atribut pada instance sesuai dengan jenis yang ditentukan dan nama properti yang sama pada instance elemen, jika properti tersebut dikonfigurasi di objek properti.

Anda dapat menyetel tipe yang ditentukan secara langsung sebagai nilai properti, jika tidak ada opsi properti lain yang ditentukan dalam objek properti; jika tidak, ini akan memberikan nilai ke kunci tipe di objek konfigurasi properti.

Mengonfigurasi Properti Boolean

Properti Boolean dapat dikonfigurasi dari markup, dengan menyetelnya ke false dan jika disetel ke true, Anda tidak dapat mengonfigurasi dari markup karena atribut dengan atau tanpa nilai disamakan dengan true. Oleh karena itu, ini dikenal sebagai perilaku standar untuk atribut di platform web.

Properti objek dan array dapat dikonfigurasi dengan meneruskannya dalam format JSON sebagai -

<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>

Mengonfigurasi Nilai Properti Default

Properti default dapat dikonfigurasi menggunakan bidang nilai di objek properti dan bisa berupa nilai primitif, atau fungsi yang mengembalikan nilai.

Contoh

Contoh berikut menggambarkan cara mengkonfigurasi nilai properti default di objek properti.

<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id="polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
   </template>

   <script>
      //cusom element extending the Polymer.Element class
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String,
                  //displaying this value on screen
                  value: 'Welcome to Tutorialspoint;!!!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya, dan navigasikan ke http://127.0.0.1:8000/. Berikut akan menjadi keluarannya.

Properti hanya-baca

Anda bisa menghindari perubahan tak terduga pada data yang dihasilkan dengan menyetel tanda readOnly ke true, di objek properti. Elemen menggunakan penyetel konvensi _setProperty (nilai), untuk mengubah nilai properti.

Contoh

Contoh berikut menggambarkan penggunaan properti hanya-baca di objek properti. Buat file index.html dan tambahkan kode berikut di dalamnya

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Sekarang, buat file lain bernama my-element.html dan sertakan kode berikut.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop = "{{demoProp}}"></prop-element>
      <p>Present value: <span>{{demoProp}}</span></p>
   </template>

   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

Selanjutnya, buat satu file lagi bernama prop-element.html dan tambahkan kode berikut.

//it specifies the start of an element's local DOM
<dom-module id="prop-element">
   <template>
      <button on-click="onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

Keluaran

Jalankan aplikasi seperti yang ditunjukkan pada contoh sebelumnya, dan navigasikan ke http://127.0.0.1:8081/. Berikut akan menjadi keluarannya.

Setelah mengklik tombol, itu akan mengubah nilai seperti yang ditunjukkan pada tangkapan layar berikut.

Mencerminkan Properti ke Atribut

Atribut HTML dapat disinkronkan dengan nilai properti dengan mengatur reflectToAttribute menjadi true pada properti di objek konfigurasi properti.

Atribut Serialisasi

Nilai properti dapat diserialkan ke atribut, sambil mencerminkan atau mengikat properti ke atribut, dan secara default nilai dapat diserialkan tergantung pada tipe nilai saat ini.

String - Tidak perlu serialisasi.
Date or Number - Gunakan toString untuk membuat serialisasi nilai.
Boolean - Setel atribut tidak bernilai yang ditampilkan sebagai benar atau salah.
Array or Object - Gunakan JSON.stringify untuk membuat serialisasi nilai.