Belajar LIT Cara Membuat Components Pada Lit Framework

Komponen Lit : Apa itu dan Cara Membuat Komponen Lit ?

Komponen Lit adalah sebuah UI yang dapat digunakan kembali. Anda dapat menganggap komponen Lit sebagai kontainer yang memiliki beberapa state dan menampilkan UI berdasarkan pada state tersebut. Ia juga dapat bereaksi terhadap input pengguna, melepas event - apapun yang diharapkan dari sebuah komponen UI. Komponen Lit juga merupakan elemen HTML, sehingga ia memiliki semua API elemen standar.

Membuat komponen Lit melibatkan beberapa konsep:

1. Defining a component. Sebuah komponen Lit diimplementasikan sebagai elemen kustom, terdaftar pada browser.

2. Rendering. Sebuah komponen memiliki metode render yang dipanggil untuk merender konten komponen. Di dalam metode render, Anda mendefinisikan sebuah template untuk komponen tersebut.

3. Reactive properties. Properti menyimpan state dari sebuah komponen. Mengubah satu atau beberapa properti reaktif dari komponen akan memicu siklus pembaruan, merender kembali komponen.

4. Styles. Sebuah komponen dapat mendefinisikan gaya terenkapsulasi untuk mengontrol penampilannya sendiri.

5. Lifecycle. Lit mendefinisikan satu set panggilan balik yang dapat Anda ganti untuk menghubungkan ke dalam siklus hidup komponen - misalnya, untuk menjalankan kode ketika elemen ditambahkan ke halaman, atau setiap kali komponen diperbarui.

Berikut adalah contoh komponen:

    import { LitElement, css, html } from 'lit';
    import { customElement, property } from 'lit/decorators.js';
    
    @customElement('simple-greeting')
    export class SimpleGreeting extends LitElement {
      // Menentukan gaya terenkapsulasi untuk komponen dalam CSS biasa
      static styles = css` :host {
          color: blue;
        }
      `;
    
      // Mendeklarasikan properti reaktif
      @property()
      name?: string = 'Dunia';
    
      // Merender UI sebagai fungsi dari state komponen
      render() {
        return html`<p>Halo, ${this.name}!</p>`;
      }
    }