Menggunakan template dapat membantu memodulasi dan menggunakan kembali kode HTML di seluruh situs web. Dengan menentukan template yang mengenkapsulasi konten HTML yang sering digunakan, kita dapat mengurangi duplikasi kode, dan mempermudah pembaruan. Template biasanya digunakan bersama dengan elemen kustom. Saat Anda membuat elemen khusus dengan shadow DOM, shadow DOM dibuat secara dinamis dan ada sebagai pohon DOM yang dienkapsulasi dalam elemen khusus.

DOM bayangan

Shadow DOM adalah cerita panjang lainnya, saya tidak akan membahasnya secara mendetail, Anda dapat merujuk ke MDN Web Docs

“ Shadow DOM memungkinkan pohon DOM tersembunyi untuk dilampirkan ke elemen di pohon DOM biasa — pohon DOM bayangan ini dimulai dengan akar bayangan, di bawahnya Anda dapat memasang elemen apa pun, dengan cara yang sama seperti DOM normal.“

“Anda dapat melampirkan akar bayangan ke elemen apa pun menggunakan metode Element.attachShadow() . Ini menggunakan objek opsi sebagai parameternya yang berisi satu opsi — mode — dengan nilai terbuka atau tertutup”

Menggunakan Templat

Pertama, mari kita gunakan template untuk menampilkan dalam format tertentu.

Misalnya, kita mungkin memiliki daftar gambar yang diambil dari API yang ingin kita tampilkan dalam format tertentu, kita dapat menentukan template dan menggunakan JavaScript untuk mengisi template dengan data dan menambahkannya ke DOM.

Kami mengambil 10 gambar acak dari API menggunakan permintaan pengambilan. Untuk setiap item dalam respons, kami mengkloning item-template dan menyetel src , textContent , dan menambahkan instance template hasil kloning ke container .

<template id="item-template">
  <div class="item">
    <img src="" alt="Item image">
    <h2></h2>
    <p></p>
  </div>
</template>
const catTemplate = document.getElementById('item-template');
const catContainer = document.getElementById('container');
const apiKey = 'live_g2TlRXkZBAczbt1TkDyGIjgWk2Yd1wHzR7NahHoqdHGLa0bVho0uKmSl8u9otL1v';

fetch(`https://api.thecatapi.com/v1/images/search?limit=10`, {
  headers: {
    'x-api-key': apiKey
  }
})
  .then(response => response.json())
  .then(data => {
    data.forEach(cat => {
      const catInstance = catTemplate.content.cloneNode(true);
      catInstance.querySelector('img').src = cat.url;
      catInstance.querySelector('h2').textContent = cat.id;
      catInstance.querySelector('p').textContent = `Width: ${cat.width} Height: ${cat.height}`;
      catContainer.appendChild(catInstance);
    });
  })
  .catch(error => {
    console.error('Error fetching cat images:', error);
  });

Sekarang kami telah mengisi wadah dengan 10 gambar kucing, lalu kami ingin menambahkan beberapa fitur interaktif ke setiap gambar. Kami ingin menambahkan dua tombol pada setiap gambar. Kita dapat membuat template lain dan memasukkannya ke dalam item-template .

<template id="item-template">
  <div class="item">
    <img src="" alt="Item image">
    <h2></h2>
    <p></p>
    <button-group></button-group>
  </div>
</template>

<template id="button-template">
  <button class="share-btn">Share</button>
  <button class="favorite-btn">Favorite</button>
</template>

Templat dan elemen khusus biasanya muncul bersamaan.

Tanpa mendefinisikan elemen khusus (yang di sini berasal dari template dengan menggunakan document.getElementById('id-name').content ), template tidak akan dirender.

Dalam contoh ini, kami mendefinisikan elemen kustom yang disebut button-group yang mengenkapsulasi button-template. Kami kemudian menambahkan elemen button-group ke item-template seperti yang disebutkan di atas dan menggunakannya dalam loop yang mengisi wadah dengan item dari API.

class ButtonGroup extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('button-template');
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.content.cloneNode(true));
      shadowRoot.querySelector('.share-btn').addEventListener('click', () => {
        console.log('Share button clicked');
      });
      shadowRoot.querySelector('.favorite-btn').addEventListener('click', () => {
        console.log('Favorite button clicked');
      });
    }
  }
  
customElements.define('button-group', ButtonGroup);

Seperti yang kami sebutkan di atas, template digunakan untuk menentukan struktur dan gaya elemen kustom, tetapi Anda mungkin ingin menyesuaikan konten elemen kustom tanpa memodifikasi template itu sendiri. Di situlah elemen slot berguna. Ini berfungsi sebagai placeholder dalam template, memungkinkan Anda meneruskan konten dari dokumen utama ke dalam elemen khusus, secara efektif menyesuaikan data dalam template kloning.

<template id="button-template">
    <button class="share-btn">Share</button>
    <button class="favorite-btn">Favorite</button>
    <slot name="cat">
        <legend>meow!</legend>
    </slot>
</template>

Namun, kami dapat mengedit "meong!" tanpa mengubah button-template , sebagai gantinya, kita bisa mengubah konten yang memiliki slot dengan atribut nama yang sama, ini dia di item-template dan kita ubah menjadi "meow meow", maka gambar akan menampilkan "meow meow" .

<template id="item-template">
    <div class="item">
        <img src="" alt="Item image">
        <h2></h2>
        <p></p>
        <button-group>
            <p slot="cat">meow meow</p>
        </button-group>
    </div>
</template>

      
                

                    
                    
                
            

Jaringan Pengembang Mozilla. (td). Menggunakan shadow DOM. Dokumen Web MDN.https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

web.dev. (td). Templat, slot, dan bayangan. web.dev.https://web.dev/learn/html/template/

Repo karya:

https://github.com/Blurmilk/579-presentation

Halaman yang diterapkan:

https://blurmilk.github.io/579-presentation/