```

Penjelasan:

1. <script src="my-element.js"></script>: Menambahkan file JavaScript yang berisi definisi komponen kita ke halaman HTML.
2. <my-element></my-element>: Menggunakan custom element kita di dalam <body>. Ketika halaman dimuat, browser akan mengenali tag ini dan membuat instance dari kelas MyElement, yang kemudian akan menampilkan pesan "Halo Dunia!".

Simpan kode JavaScript di atas sebagai my-element.js dan kode HTML sebagai index.html. Buka index.html di browser Anda, dan Anda akan melihat pesan "Halo Dunia!".

Menggunakan Shadow DOM untuk Enkapsulasi

Untuk mengenkapsulasi gaya dan logika komponen kita, kita akan menggunakan Shadow DOM. Mari kita modifikasi contoh sebelumnya untuk menggunakan Shadow DOM.

```javascript class MyElement extends HTMLElement { constructor() { super();

// Membuat shadow root this.attachShadow({ mode: 'open' }); }

connectedCallback() { // Menambahkan konten ke shadow root this.shadowRoot.innerHTML = `

Halo Dunia!

`; } }

customElements.define('my-element', MyElement); ```

Penjelasan:

1. this.attachShadow({ mode: 'open' });: Membuat Shadow DOM dan melampirkannya ke elemen kita. Opsi mode: 'open' memungkinkan kita untuk mengakses Shadow DOM dari JavaScript eksternal menggunakan properti shadowRoot.
2. this.shadowRoot.innerHTML = `...`;: Menetapkan konten ke Shadow DOM. Perhatikan bahwa kita menambahkan tag <style> di dalam Shadow DOM untuk menetapkan gaya khusus untuk komponen kita. Gaya ini hanya akan berlaku untuk elemen di dalam Shadow DOM dan tidak akan mempengaruhi gaya di luar Shadow DOM.

Dalam contoh ini, kita menambahkan gaya CSS di dalam Shadow DOM untuk mengubah warna teks menjadi biru. Gaya ini hanya akan berlaku untuk elemen <p> di dalam Shadow DOM dan tidak akan mempengaruhi elemen <p> lain di halaman.

Menggunakan HTML Templates

HTML Templates memungkinkan kita untuk mendefinisikan struktur HTML yang dapat digunakan kembali dalam komponen kita. Ini sangat berguna untuk membuat komponen yang lebih kompleks.

```html